<template>
    <a-modal title="流程设计" @editItem="editItem" :visible="show" width="100%" :forceRender="true"
        wrapClassName="full-modal" :confirm-loading="modalLoading" @ok="modalOk" @cancel="modalCancel">
        <div style="height: 100%;">
            <div style="margin-top: 0px;">
                <Flex gap="small" wrap>
                    <a-button type="primary" style="margin-left: 20px" @click="SaveBpmnXml">保存</a-button>
                    <a-button type="primary" style="margin-left: 20px" @click="bpmnDetailShow">xml</a-button>
                    <a-button type="primary" style="margin-left: 20px">SVG</a-button>
                    <a-button type="primary" style="margin-left: 20px" @click="SwitchMock">模拟/关闭模拟</a-button>
                    <a-tooltip title="放大视图" color="lime">
                        <a-button type="text" @click="processZoomIn"> <template #icon>
                                <ZoomInOutlined />
                            </template></a-button>
                    </a-tooltip>
                    <a-tooltip title="缩小视图" color="lime">
                        <a-button type="text" @click="processZoomOut"> <template #icon>
                                <ZoomOutOutlined />
                            </template></a-button>
                    </a-tooltip>
                    <a-tooltip title="左对齐" color="lime">
                        <a-button type="text" @click="elementsAlign('left')"> <template #icon>
                                <AlignLeftOutlined />
                            </template></a-button>
                    </a-tooltip>
                    <a-tooltip title="水平居中" color="lime">
                        <a-button type="text" @click="elementsAlign('center')"> <template #icon>
                                <AlignCenterOutlined />
                            </template></a-button>
                    </a-tooltip>
                    <a-tooltip title="右对齐" color="lime">
                        <a-button type="text" @click="elementsAlign('right')"> <template #icon>
                                <AlignRightOutlined />
                            </template></a-button>
                    </a-tooltip>
                    <a-tooltip title="上对齐" color="lime">
                        <a-button type="text" @click="elementsAlign('top')"> <template #icon>
                                <VerticalAlignTopOutlined />
                            </template></a-button>
                    </a-tooltip>
                    <a-tooltip title="垂直居中" color="lime">
                        <a-button type="text" @click="elementsAlign('middle')"> <template #icon>
                                <VerticalAlignMiddleOutlined />
                            </template></a-button>
                    </a-tooltip>
                    <a-tooltip title="下对齐" color="lime">
                        <a-button type="text" @click="elementsAlign('bottom')"> <template #icon>
                                <VerticalAlignBottomOutlined />
                            </template></a-button>
                    </a-tooltip>

                    <a-tooltip title="重置视图" color="lime">
                        <a-button type="text" @clicl="processReZoom()">100%</a-button>
                    </a-tooltip>

                    <a-tooltip title="鼠标控制" color="lime">
                        <a-button type="text" style="line-height:32px;">
                            <template #icon>
                                <SvgIcon icon="mouse" :size="16" />
                            </template>
                        </a-button>
                    </a-tooltip>

                    <a-tooltip title="鹰眼窗口" color="lime">
                        <a-button type="text"> <template #icon>
                                <EyeOutlined />
                            </template></a-button>
                    </a-tooltip>

                    <a-tooltip title="撤销" color="lime">
                        <a-button type="text" style="line-height:32px;" @click="processUndo">
                            <template #icon>
                                <SvgIcon icon="revoke" :size="16" />
                            </template>
                        </a-button>
                    </a-tooltip>

                    <a-tooltip title="恢复" color="lime">
                        <a-button type="text" style="line-height:32px;" @click="processRedo">
                            <template #icon>
                                <SvgIcon icon="restore" :size="16" />
                            </template>
                        </a-button>
                    </a-tooltip>
                </Flex>
            </div>

            <div class="containers">

                <div class="canvas" id="container" ref="canvasRef"></div>
                <div id="js-properties-panel" class="panel"></div>
                <div class="toggle-btn" v-on:click="Panelexpand">
                    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor"
                        class="arco-icon arco-icon-double-left"
                        :class="panelProperties.PanelexpandVal == true ? 'arco-icon-rotate' : ''" stroke-width="4"
                        stroke-linecap="butt" stroke-linejoin="miter" style="font-size: 12px;">
                        <path d="M36.857 9.9 22.715 24.042l14.142 14.142M25.544 9.9 11.402 24.042l14.142 14.142"></path>
                    </svg>
                </div>
                <!--xml-->
                <!--自定义右边属性面板-->
                <div
                    :class="panelProperties.PanelexpandVal == true ? 'custom-properties-panel-open' : 'custom-properties-panel'">
                    <div class="empty" v-if="selectedElementsArr.selectedElements.length <= 0">请选择一个元素</div>
                    <div class="empty" v-else-if="selectedElementsArr.selectedElements.length > 1">只能选择一个元素</div>
                    <div v-else>
                        <fieldset class="element-item">
                            <label>节点id</label>
                            <span>{{ bpmn_properties.id }}</span>
                        </fieldset>
                        <fieldset class="element-item">
                            <label>名称&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <input :value="bpmn_properties.name" @change="(event) => changeField(event, 'name')" />
                        </fieldset>
                        <fieldset class="element-item">
                            <label>用户名{{ eventType }}</label>
                            <select @change="changeEventType" :value="eventType"
                                style="width: 182px; border: 1px solid #d9d9d9; border-radius: 5px">
                                <option v-for="option in eventTypesArr.eventTypes" :key="option.value"
                                    :value="option.value">{{
                                        option.label }}</option>
                            </select>
                        </fieldset>
                    </div>

                    <a-collapse v-model:activeKey="panelProperties.PanelActiveKey">
                        <a-collapse-panel key="general" header="常规信息">
                            <div>
                                <span style="width:30%;display:inline-block;">ID:</span>
                                <a-input style="width:70%;" placeholder="节点ID" disabled
                                    :value="bpmnProperties.General.id" />
                            </div>
                            <div style="margin-top: 10px;">
                                <span style="width:30%;display:inline-block;">名称:</span>
                                <a-input style="width:70%;" @change="(event) => changeField(event, 'General', 'name')"
                                    placeholder="节点名称" :value="bpmnProperties.General.name" />
                            </div>
                            <div style="margin-top: 10px;" v-show="panelProperties.Panels.ShowInitiator">
                                <span style="width:30%;display:inline-block;">发起人:</span>
                                <a-input style="width:70%;" placeholder="发起人"
                                    @change="(event) => changeField(event, 'General', 'initiator')"
                                    :value="bpmnProperties.General.initiator" />
                            </div>
                            <div style="margin-top: 10px;" v-show="panelProperties.ShowAsync">
                                <span style="width:30%;display:inline-block;">异步:</span><a-switch
                                    v-model:checked="bpmnProperties.General.async"
                                    @change="(event) => changeValueField(event, 'General', 'async')" />
                            </div>
                            <div style="margin-top: 10px;" v-show="panelProperties.Panels.ShowSkipExpression">
                                <span style="width:30%;display:inline-block;">跳过表达式:</span>
                                <a-input style="width:70%;" placeholder="表达式"
                                    @change="(event) => changeField(event, 'General', 'skipExpression')"
                                    :value="bpmnProperties.General.skipExpression" />
                            </div>
                        </a-collapse-panel>
                        <a-collapse-panel key="flowconfiguration" header="流转配置"
                            v-show="panelProperties.Panels.FlowconfigurationShow">
                            <div>
                                <span style="width:30%;display:inline-block;">流转类型:</span>
                                <a-radio-group v-model:value="bpmnProperties.FlowconfigurationValue"
                                    @change="updateFlowType" size="small">
                                    <a-radio-button value="normal">普通</a-radio-button>
                                    <a-radio-button value="default">默认</a-radio-button>
                                    <a-radio-button value="condition">条件</a-radio-button>
                                </a-radio-group>
                            </div>
                            <div v-if="bpmnProperties.FlowconfigurationValue == 'condition'"
                                style="line-height:100px;margin-top:10px;">
                                <span style="width: 60px;">表达式</span>
                                <div style="display:inline-block;width:220px;margin-left:15px;background:lightgray;">
                                    <span
                                        style="background-color: light-gray;height:100px;width:60px;padding:10px">${</span>
                                    <a-textarea style="width: 74%;"
                                        v-model:value="bpmnProperties.FlowconfigurationCondition" placeholder="表达式"
                                        :rows="4" @change="updateFlowCondition" />
                                    <span style="background-color: light-gray;height:60px;padding:10px;">}</span>
                                </div>
                            </div>
                        </a-collapse-panel>
                        <a-collapse-panel key="usertask" header="用户任务" :disabled="false"
                            v-show="panelProperties.Panels.ShowUserTask">
                            <a-tabs v-model:activeKey="panelProperties.UserTaskActiveKey" tab-position="left"
                                @change="handleUserTaskTabChange" size="small" :tabBarGutter="0.1">
                                <a-tab-pane key="fixedVal" tab="固定值">
                                    <div>
                                        <div size="small">
                                            <span style="width:30%;display:inline-block;font-size:12px;">分配人员:</span>
                                            <a-input style="width:70%;" placeholder="请输入审批人"
                                                v-model:value="bpmnProperties.AssigneeSetting.Assignee"
                                                @change="fixedAssigneeChange" />
                                        </div>
                                        <div size="small" style="margin-top:10px;">
                                            <span style="width:30%;display:inline-block;font-size:12px;">候选人员:</span>
                                            <a-input style="width:70%;" placeholder="请输入审批人"
                                                v-model:value="bpmnProperties.AssigneeSetting.CandidateUsersStr"
                                                @change="fixedCandidateUsersChange" />
                                        </div>
                                        <div size="small" style="margin-top:10px;">
                                            <span style="width:30%;display:inline-block;font-size:12px;">候选角色:</span>
                                            <a-input style="width:70%;" placeholder="请输入审批人"
                                                v-model:value="bpmnProperties.AssigneeSetting.CandidateGroupsStr"
                                                @change="fixedCandidateGroupsChange" />
                                        </div>
                                    </div>
                                </a-tab-pane>
                                <a-tab-pane key="identifyVal" tab="身份标识">
                                    <div>
                                        <div>
                                            <span style="width:30%;display:inline-block;font-size:12px;">指定分配:</span>
                                            <a-radio-group v-model:value="bpmnProperties.UserTaskSpecifyAllocation"
                                                size="small">
                                                <a-radio-button value="assigner">指定人</a-radio-button>
                                                <a-radio-button value="promoter"
                                                    @click="startAssignerClick">发起人</a-radio-button>
                                            </a-radio-group>
                                        </div>

                                        <div v-if="bpmnProperties.UserTaskSpecifyAllocation == 'assigner'">
                                            <div size="small" style="margin-top:10px;">
                                                <span
                                                    style="width:30%;display:inline-block;font-size:12px;">分配人员:</span>
                                                <!-- <a-input style="width:70%;" placeholder="请输入审批人" /> -->
                                                <a-select show-search placeholder="请输入审批人" style="width: 70%;"
                                                    :options="panelProperties.Assigner.AssignerOptions"
                                                    v-model:value="bpmnProperties.AssigneeSetting.Assignee"
                                                    @change="handleAssignerChange" @focus="handleAssignerFocus">
                                                </a-select>
                                            </div>
                                            <div size="small" style="margin-top:10px;">
                                                <span
                                                    style="width:30%;display:inline-block;font-size:12px;">候选人员:</span>
                                                <!-- <a-input style="width:70%;" placeholder="请输入审批人" /> -->
                                                <a-select show-search placeholder="候选人员" style="width: 70%;"
                                                    v-model:value="bpmnProperties.AssigneeSetting.CandidateUsers"
                                                    mode="multiple" :options="panelProperties.Assigner.AssignerOptions"
                                                    @change="handleCandidateUsersChange"
                                                    @focus="handleCandidateUsersFocus">
                                                </a-select>
                                            </div>
                                            <div size="small" style="margin-top:10px;">
                                                <span
                                                    style="width:30%;display:inline-block;font-size:12px;">候选角色:</span>
                                                <!-- <a-input style="width:70%;" placeholder="请输入审批人" /> -->
                                                <a-select show-search placeholder="候选角色" style="width: 70%;"
                                                    mode="multiple"
                                                    v-model:value="bpmnProperties.AssigneeSetting.CandidateGroups"
                                                    :options="panelProperties.Assigner.CandidateGroupsOptions"
                                                    @change="handleCandidateGroupsChange"
                                                    @focus="handleCandidateGroupsFocus">
                                                </a-select>
                                            </div>
                                        </div>

                                        <div v-if="bpmnProperties.UserTaskSpecifyAllocation == 'promoter'">
                                            <div size="small" style="margin-top:10px;">
                                                <span
                                                    style="width:30%;display:inline-block;font-size:12px;">候选人员:</span>
                                                <a-input style="width:70%;" placeholder="请输入审批人" />
                                            </div>
                                            <div size="small" style="margin-top:10px;">
                                                <span
                                                    style="width:30%;display:inline-block;font-size:12px;">候选角色:</span>
                                                <a-input style="width:70%;" placeholder="请输入审批人" />
                                            </div>
                                        </div>

                                    </div>
                                </a-tab-pane>
                            </a-tabs>
                            <div style="margin-top:15px;">
                                <span style="width:30%;display:inline-block;">到期时间:</span>
                                <a-input-search style="width:70%;" placeholder="到期时间"
                                    v-model:value="bpmnProperties.AssigneeSetting.DueDate" enter-button
                                    @search="onDueDateSearch" @change="onDueDateChange" />
                            </div>
                            <div style="margin-top:10px;">
                                <span style="width:30%;display:inline-block;">优先级:</span>
                                <a-input-number style="width:70%;" :min="1" :max="100"
                                    v-model:value="bpmnProperties.AssigneeSetting.Priority" placeholder="优先级"
                                    @change="onPriorityChange" />
                            </div>
                        </a-collapse-panel>
                        <a-collapse-panel key="freeapproval" header="自由审批" :disabled="false"
                            v-show="panelProperties.Panels.ShowFreeApproval">
                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <span>
                                    <UserOutlined /><label>下一审批人配置</label>
                                </span>
                                <a-button type="primary" size="small" style="">
                                    <template #icon>
                                        <PlusOutlined />
                                    </template>
                                    添加下一审批人</a-button>
                            </div>
                            <a-table style="margin-top:5px;" size="small" :columns="panelProperties.ApproverColumns"
                                :data-source="bpmnProperties.ApproverDataSource" bordered>
                            </a-table>
                            <div
                                style="margin-top: 10px;display: flex; justify-content: space-between; align-items: center;">
                                <span>
                                    <SendOutlined /><label>下一流转配置</label>
                                </span>
                                <a-button type="primary" size="small">
                                    <template #icon>
                                        <PlusOutlined />
                                    </template>
                                    添加下一流转</a-button>
                            </div>
                            <a-table style="margin-top:5px;" size="small"
                                :columns="panelProperties.FlowconfigurationColumns"
                                :data-source="bpmnProperties.FlowconfigurationDataSource" bordered>
                            </a-table>
                        </a-collapse-panel>
                        <a-collapse-panel key="tasklistener" header="任务监听器" :disabled="false"
                            v-show="panelProperties.Panels.ShowTaskListener">
                            <a-table :columns="panelProperties.TaskListenerColumns" size="small" :pagination="false"
                                rowKey="id" :data-source="bpmnProperties.TaskListenerDataSource" bordered>
                                <template #operation="{ record }">
                                    <div class="editable-row-operations">

                                        <span>
                                            <a @click="editTasklistener(record.id)">编辑</a>
                                        </span>
                                        <span>
                                            <a @click="delTasklistener(record.id)">删除</a>
                                        </span>
                                    </div>
                                </template>
                            </a-table>
                            <a-button type="primary" block style="margin-top: 10px;" size="small"
                                @click="addTaskListener">
                                <template #icon>
                                    <PlusOutlined />
                                </template>
                                添加监听器</a-button>
                        </a-collapse-panel>
                        <a-collapse-panel key="globalevents" header="全局事件" :disabled="false"
                            v-show="panelProperties.Panels.ShowGlobalEvents">
                            <a-collapse v-model:activeKey="panelProperties.GlobalEventsActiveKey" :bordered="false">
                                <template #expandIcon="{ isActive }">
                                    <caret-right-outlined :rotate="isActive ? 90 : 0" />
                                </template>
                                <a-collapse-panel key="MessageEvent" header="消息事件" :style="customStyle">

                                    <a-table :columns="panelProperties.MessageEventColumns" size="small" rowKey="id"
                                        :pagination="false" :data-source="bpmnProperties.MessageEventDataSource"
                                        bordered>
                                        <template v-for="col in ['name']" #[col]="{ text, record }" :key="col">
                                            <div>
                                                <a-input v-if="MessageEventEditableData[record.id]"
                                                    v-model:value="MessageEventEditableData[record.id][col]"
                                                    style="margin: -5px 0;width:auto;" />
                                                <template v-else>
                                                    {{ text }}
                                                </template>
                                            </div>
                                        </template>

                                        <template #operation="{ record }">
                                            <div class="editable-row-operations">
                                                <span v-if="MessageEventEditableData[record.id]">
                                                    <a @click="saveMessageEvent(record.id)">保存</a>
                                                    <a-popconfirm title="确定退出?"
                                                        @confirm="cancelMessageEvent(record.id)">
                                                        <a>退出</a>
                                                    </a-popconfirm>
                                                </span>
                                                <span v-else>
                                                    <a @click="editMessageEvent(record.id)">编辑</a>
                                                    <a @click="delMessageEvent(record.id)">删除</a>
                                                </span>
                                            </div>
                                        </template>
                                    </a-table>
                                    <a-button type="primary" block style="margin-top: 10px;" size="small"
                                        @click="addMessageEvent">
                                        <template #icon>
                                            <PlusOutlined />
                                        </template>
                                        添加消息事件</a-button>
                                </a-collapse-panel>
                                <a-collapse-panel key="ErrorList" header="错误列表" :style="customStyle">
                                    <a-table :columns="panelProperties.ErrorListColumns" size="small" rowKey="id"
                                        :pagination="false" :data-source="bpmnProperties.ErrorListDataSource" bordered>
                                        <template v-for="col in ['name', 'errorCode']" #[col]="{ text, record }"
                                            :key="col">
                                            <div>
                                                <a-input v-if="ErrorListEditableData[record.id]"
                                                    v-model:value="ErrorListEditableData[record.id][col]"
                                                    style="margin: -5px 0" />
                                                <template v-else>
                                                    {{ text }}
                                                </template>
                                            </div>
                                        </template>
                                        <template #operation="{ record }">
                                            <div class="editable-row-operations">
                                                <span v-if="ErrorListEditableData[record.id]">
                                                    <a @click="saveErrorList(record.id)">保存</a>
                                                    <a-popconfirm title="确定退出?" @confirm="cancelErrorList(record.id)">
                                                        <a>退出</a>
                                                    </a-popconfirm>
                                                </span>
                                                <span v-else>
                                                    <a @click="editErrorList(record.id)">编辑</a>
                                                    <a @click="delErrorList(record.id)">删除</a>
                                                </span>
                                            </div>
                                        </template>
                                    </a-table>
                                    <a-button type="primary" block style="margin-top: 10px;" size="small"
                                        @click="addErrorList">
                                        <template #icon>
                                            <PlusOutlined />
                                        </template>
                                        添加错误列表</a-button>
                                </a-collapse-panel>
                                <a-collapse-panel key="SingalList" header="信号列表" :style="customStyle">
                                    <a-table :columns="panelProperties.SingalListColumns" size="small" rowKey="id"
                                        :pagination="false" :data-source="bpmnProperties.SingalListDataSource" bordered>
                                        <template v-for="col in ['name', 'scope']" #[col]="{ text, record }" :key="col">
                                            <div>
                                                <template v-if="SingalListEditableData[record.id]">
                                                    <a-input v-if="col != 'scope'"
                                                        v-model:value="SingalListEditableData[record.id][col]"
                                                        style="margin: -5px 0" />
                                                    <a-select v-else-if="col == 'scope'"
                                                        v-model:value="SingalListEditableData[record.id][col]"
                                                        style="margin: -5px 0;width:90px;">
                                                        <a-select-option value="global">全局</a-select-option>
                                                        <a-select-option value="processInstance">当前实例</a-select-option>
                                                    </a-select>
                                                </template>
                                                <template v-else-if="col == 'scope'">
                                                    {{ text == undefined ? text : singalScopeType[text] }}
                                                </template>
                                                <template v-else>
                                                    {{ text }}
                                                </template>
                                            </div>
                                        </template>

                                        <template #operation="{ record }">
                                            <div class="editable-row-operations">
                                                <span v-if="SingalListEditableData[record.id]">
                                                    <a @click="saveSingalList(record.id)">保存</a>
                                                    <a-popconfirm title="确定退出?" @confirm="cancelSingalList(record.id)">
                                                        <a>退出</a>
                                                    </a-popconfirm>
                                                </span>
                                                <span v-else>
                                                    <a @click="editSingalList(record.id)">编辑</a>
                                                    <a @click="delSingalList(record.id)">删除</a>
                                                </span>
                                            </div>
                                        </template>
                                    </a-table>
                                    <a-button type="primary" block style="margin-top: 10px;" size="small"
                                        @click="addSingalList">
                                        <template #icon>
                                            <PlusOutlined />
                                        </template>
                                        添加信号列表</a-button>
                                </a-collapse-panel>
                                <a-collapse-panel key="UpdateList" header="升级列表" :style="customStyle">
                                    <a-table :columns="panelProperties.UpdateListColumns" size="small" rowKey="id"
                                        :pagination="false" :data-source="bpmnProperties.UpdateListDataSource" bordered>
                                        <template v-for="col in ['name', 'escalationCode']" #[col]="{ text, record }"
                                            :key="col">
                                            <div>
                                                <a-input v-if="UpdateListEditableData[record.id]"
                                                    v-model:value="UpdateListEditableData[record.id][col]"
                                                    style="margin: -5px 0" />
                                                <template v-else>
                                                    {{ text }}
                                                </template>
                                            </div>
                                        </template>
                                        <template #operation="{ record }">
                                            <div class="editable-row-operations">
                                                <span v-if="UpdateListEditableData[record.id]">
                                                    <a @click="saveUpdateList(record.id)">保存</a>
                                                    <a-popconfirm title="确定退出?" @confirm="cancelUpdateList(record.id)">
                                                        <a>退出</a>
                                                    </a-popconfirm>
                                                </span>
                                                <span v-else>
                                                    <a @click="editUpdateList(record.id)">编辑</a>
                                                    <a @click="delUpdateList(record.id)">删除</a>
                                                </span>
                                            </div>
                                        </template>
                                    </a-table>
                                    <a-button type="primary" block style="margin-top: 10px;" size="small"
                                        @click="addUpdateList">
                                        <template #icon>
                                            <PlusOutlined />
                                        </template>
                                        添加升级列表</a-button>
                                </a-collapse-panel>
                            </a-collapse>
                        </a-collapse-panel>

                        <a-collapse-panel key="executelistener" header="执行监听器" :disabled="false">
                            <a-table :columns="panelProperties.TaskExecuteListenerColumns" size="small"
                                :pagination="false" rowKey="id"
                                :data-source="bpmnProperties.TaskExecuteListenerDataSource" bordered>
                                <template #operation="{ record }">
                                    <div class="editable-row-operations">
                                        <span>
                                            <a @click="editTaskExecuteListener(record.id)">编辑</a>
                                            <a @click="delTaskExecuteListener(record.id)">删除</a>
                                        </span>
                                    </div>
                                </template>
                            </a-table>
                            <a-button type="primary" block style="margin-top: 10px;" size="small"
                                @click="AddTaskExecuteListener">
                                <template #icon>
                                    <PlusOutlined />
                                </template>
                                添加监听器</a-button>
                        </a-collapse-panel>
                        <a-collapse-panel key="eventlistener" header="事件监听器" :disabled="false"
                            v-show="panelProperties.Panels.ShowEventListener">
                            <a-table :columns="panelProperties.TaskEventListenerColumns" size="small"
                                :pagination="false" rowKey="id"
                                :data-source="bpmnProperties.TaskEventListenerDataSource" bordered>
                                <template #operation="{ record }">
                                    <div class="editable-row-operations">
                                        <span>
                                            <a @click="editEventListener(record.id)">编辑</a>
                                            <a @click="delEventListener(record.id)">删除</a>
                                        </span>
                                    </div>
                                </template>
                            </a-table>
                            <a-button type="primary" block style="margin-top: 10px;" size="small"
                                @click="addEventListener">
                                <template #icon>
                                    <PlusOutlined />
                                </template>
                                添加监听器</a-button>
                        </a-collapse-panel>
                        <a-collapse-panel key="multiinstance" header="多实例" :disabled="false"
                            v-show="panelProperties.Panels.ShowMultiInstance">
                            <div>
                                <span style="width:30%;display:inline-block;">多实例类型:</span>
                                <a-radio-group v-model:value="bpmnProperties.MultiInstance.MultiInstanceValue"
                                    size="small" @change="changeLoopCharacteristicsType">
                                    <a-radio-button value="none">无</a-radio-button>
                                    <a-radio-button value="parallel">并行</a-radio-button>
                                    <a-radio-button value="serial">串行</a-radio-button>
                                    <a-radio-button value="loop">循环</a-radio-button>
                                </a-radio-group>
                            </div>
                            <div
                                v-if="bpmnProperties.MultiInstance.MultiInstanceValue == 'parallel' || bpmnProperties.MultiInstance.MultiInstanceValue == 'serial'">
                                <div style="margin-top: 10px;">
                                    <span style="width:30%;display:inline-block;">基数:</span>
                                    <a-input style="width:70%;" placeholder="请输入基数" @change="updateLoopCardinality"
                                        v-model:value="bpmnProperties.MultiInstance.LoopInstanceForm.LoopCardinality" />
                                </div>
                                <div style="margin-top: 10px;">
                                    <span style="width:30%;display:inline-block;">集合:</span>
                                    <a-input style="width:70%;" placeholder="请输入集合"
                                        v-model:value="bpmnProperties.MultiInstance.LoopInstanceForm.Collection"
                                        @change="updateLoopBase" />
                                </div>
                                <div style="margin-top: 10px;">
                                    <span style="width:30%;display:inline-block;">元素变量:</span>
                                    <a-input style="width:70%;" placeholder="请输入元素变量"
                                        v-model:value="bpmnProperties.MultiInstance.LoopInstanceForm.ElementVariable"
                                        @change="updateLoopBase" />
                                </div>
                                <div style="margin-top: 10px;">
                                    <span style="width:30%;display:inline-block;">完成条件:</span>
                                    <a-input style="width:70%;" placeholder="请输入完成条件" @change="updateLoopCondition"
                                        v-model:value="bpmnProperties.MultiInstance.LoopInstanceForm.CompletionCondition" />
                                </div>
                                <div style="margin-top: 10px;">
                                    <a-checkbox
                                        v-model:checked="bpmnProperties.MultiInstance.LoopInstanceForm.AsyncBefore"
                                        @change="updateLoopAsync('AsyncBefore')">
                                        异步前
                                    </a-checkbox>
                                    <a-checkbox
                                        v-model:checked="bpmnProperties.MultiInstance.LoopInstanceForm.AsyncAfter"
                                        @change="updateLoopAsync('AsyncAfter')">
                                        异步后
                                    </a-checkbox>
                                    <a-checkbox
                                        v-if="bpmnProperties.MultiInstance.LoopInstanceForm.AsyncAfter || bpmnProperties.MultiInstance.LoopInstanceForm.AsyncBefore"
                                        v-model:checked="bpmnProperties.MultiInstance.LoopInstanceForm.Exclusive"
                                        @change="updateLoopAsync('Exclusive')">
                                        排除
                                    </a-checkbox>
                                </div>
                                <div style="margin-top: 10px;">
                                    <span style="width:30%;display:inline-block;">重试周期:</span>
                                    <a-input style="width:70%;" placeholder="请输入重试周期" @change="updateLoopTimeCycle"
                                        v-model:value="bpmnProperties.MultiInstance.LoopInstanceForm.TimeCycle" />
                                </div>
                                <div style="margin-top: 10px;">
                                    <span style="width:15%;display:inline-block;">条件:</span>
                                    <a-radio-group
                                        v-model:value="bpmnProperties.MultiInstance.LoopInstanceForm.MultiInstanceCondition"
                                        size="small" @change="MultiInstanceConditionChange">
                                        <a-radio-button value="all">全部</a-radio-button>
                                        <a-radio-button value="percentage">百分比</a-radio-button>
                                        <a-radio-button value="number">数量</a-radio-button>
                                        <a-radio-button value="expression">表达式</a-radio-button>
                                    </a-radio-group>
                                    <div v-if="bpmnProperties.MultiInstance.LoopInstanceForm.MultiInstanceCondition == 'percentage'"
                                        style="margin-top:10px;">
                                        <a-input-group compact size="small">
                                            <a-select
                                                v-model:value="bpmnProperties.MultiInstance.LoopInstanceForm.MultiInstancePercentageCondition"
                                                style="width: 30%;margin-left:53px;line-height:0 !important;"
                                                @change="MultiInstancePercentageConditionChange">
                                                <a-select-option value=">">大于</a-select-option>
                                                <a-select-option value=">=">大于等于</a-select-option>
                                                <a-select-option value="=">等于</a-select-option>
                                                <a-select-option value="<">小于</a-select-option>
                                                <a-select-option value="<=">小于等于</a-select-option>
                                            </a-select>
                                            <a-input-number size="small"
                                                v-model:value="bpmnProperties.MultiInstance.LoopInstanceForm.MultiInstancePercentageConditionVal"
                                                style="width: 50%;" :min="0" :max="100"
                                                @change="MultiInstancePercentageConditionValChange"
                                                :formatter="value => `${value}%`"
                                                :parser="value => value.replace('%', '')" />
                                        </a-input-group>
                                    </div>
                                    <div v-if="bpmnProperties.MultiInstance.LoopInstanceForm.MultiInstanceCondition == 'number'"
                                        style="margin-top:10px;">
                                        <a-input-group compact size="small">
                                            <a-select
                                                v-model:value="bpmnProperties.MultiInstance.LoopInstanceForm.MultiInstanceNumberCondition"
                                                style="width: 30%;margin-left:53px;"
                                                @change="MultiInstanceNumberConditionChange">
                                                <a-select-option value=">">大于</a-select-option>
                                                <a-select-option value=">=">大于等于</a-select-option>
                                                <a-select-option value="=">等于</a-select-option>
                                                <a-select-option value="<">小于</a-select-option>
                                                <a-select-option value="<=">小于等于</a-select-option>
                                            </a-select>
                                            <a-input-number size="small"
                                                v-model:value="bpmnProperties.MultiInstance.LoopInstanceForm.MultiInstanceNumberConditionVal"
                                                style="width: 50%;" :min="0" :max="100"
                                                @change="MultiInstanceNumberConditionValChange" />
                                        </a-input-group>
                                    </div>
                                    <div v-if="bpmnProperties.MultiInstance.LoopInstanceForm.MultiInstanceCondition == 'expression'"
                                        style="margin-top:10px;">
                                        <a-input
                                            v-model:value="bpmnProperties.MultiInstance.LoopInstanceForm.MultiInstanceConditionExpression"
                                            placeholder="请输入完成条件表达式" style="margin-left: 53px;width:85%;"
                                            @change="MultiInstanceConditionExpressionChange" size="small" />
                                    </div>
                                </div>
                            </div>
                        </a-collapse-panel>
                        <a-collapse-panel key="form" header="表单" :disabled="false"
                            v-show="panelProperties.Panels.ShowForm">
                            <a-table :columns="panelProperties.FormColumns" size="small" rowKey="Id"
                                :data-source="bpmnProperties.FormDataSource" :pagination="false" bordered>
                                <template #operation="{ record }">
                                    <div class="editable-row-operations">
                                        <span v-if="record != undefined">
                                            <a @click="editFormConfig(record)">编辑</a>
                                        </span>
                                        <span v-if="record.Id != undefined">
                                            <a @click="delFormConfig(record.Id)">删除</a>
                                        </span>
                                    </div>
                                </template>
                            </a-table>
                            <a-button type="primary" block style="margin-top: 10px;" size="small"
                                @click="addFormConfig">
                                <template #icon>
                                    <PlusOutlined />
                                </template>
                                配置表单</a-button>
                        </a-collapse-panel>
                        <a-collapse-panel key="extendedattribute" header="扩展属性" :disabled="false">
                            <a-table :columns="panelProperties.ExtendedAttributeColumns" size="small" rowKey="id"
                                :data-source="bpmnProperties.ExtendedAttributeDataSource" :pagination="false" bordered>
                                <template v-for="col in ['name', 'value']" #[col]="{ text, record }" :key="col">
                                    <div>
                                        <a-input v-if="ExtendedAttributeEditableData[record.id]"
                                            v-model:value="ExtendedAttributeEditableData[record.id][col]"
                                            style="margin: -5px 0" />
                                        <template v-else>
                                            {{ text }}
                                        </template>
                                    </div>
                                </template>
                                <template #operation="{ record }">
                                    <div class="editable-row-operations">
                                        <span v-if="ExtendedAttributeEditableData[record.id]">
                                            <a @click="saveExtendedAttribute(record.id)">保存</a>
                                            <a-popconfirm title="确定退出?" @confirm="cancelExtendedAttribute(record.id)">
                                                <a>退出</a>
                                            </a-popconfirm>
                                        </span>
                                        <span v-else>
                                            <a @click="editExtendedAttribute(record.id)">编辑</a>
                                        </span>
                                        <span v-if="record.id != undefined">
                                            <a @click="delExtendedAttribute(record.id)">删除</a>
                                        </span>
                                    </div>
                                </template>
                            </a-table>
                            <a-button type="primary" block style="margin-top: 10px;" size="small"
                                @click="addExtendedAttribute">
                                <template #icon>
                                    <PlusOutlined />
                                </template>
                                添加属性</a-button>
                        </a-collapse-panel>
                        <a-collapse-panel key="descdoc" header="描述文档" :disabled="false" style="line-height: 100px;">
                            <span style="width:10%;display:inline-block;align-items:center;">文档:</span>
                            <a-textarea style="width: 70%;" v-model:value="bpmnProperties.DescriptionDoc.documentation"
                                placeholder="请输入描述" :rows="4"
                                @change="(event: any) => changeElementField(event, 'bpmn:Documentation', 'DescriptionDoc', 'documentation')" />
                        </a-collapse-panel>
                    </a-collapse>
                </div>

                <!--自定义右边属性面板完-->
            </div>
        </div>
    </a-modal>

    <!-- 任务监听器模态框 -->
    <a-modal title="添加监听器" v-model:visible="model_visible" :confirm-loading="confirmLoading" @ok="model_handleOk">
        <div>
            <span style="width:30%;display:inline-block;">事件类型:</span>

            <a-radio-group v-model:value="bpmnProperties.TaskListener.event" size="small"
                v-if="panelProperties.ListenerType == 'TaskListener'">
                <a-radio-button value="create">创建</a-radio-button>
                <a-radio-button value="assignment">指派</a-radio-button>
                <a-radio-button value="complete">完成</a-radio-button>
                <a-radio-button value="delete">删除</a-radio-button>
                <a-radio-button value="update">更新</a-radio-button>
                <a-radio-button value="timeout">超时</a-radio-button>
            </a-radio-group>
            <a-radio-group v-model:value="bpmnProperties.TaskListener.event" size="small" v-else>
                <a-radio-button value="start">开始</a-radio-button>
                <a-radio-button value="Take">启用</a-radio-button>
                <a-radio-button value="end">结束</a-radio-button>
            </a-radio-group>
        </div>
        <div style="margin-top: 10px;">
            <span style="width:30%;display:inline-block;">监听器类型:</span>
            <a-radio-group v-model:value="bpmnProperties.TaskListener.listenerType" size="small">
                <a-radio-button value="classListener">类</a-radio-button>
                <a-radio-button value="expressionListener">表达式</a-radio-button>
                <a-radio-button value="delegateExpressionListener">代理表达式</a-radio-button>
                <a-radio-button value="scriptListener">脚本</a-radio-button>
            </a-radio-group>
        </div>
        <div style="margin-top: 10px;">
            <span style="width:30%;display:inline-block;">事务类型:</span>
            <a-radio-group v-model:value="bpmnProperties.TaskListener.onTransaction" size="small">
                <a-radio-button value="before-commit">提交前</a-radio-button>
                <a-radio-button value="committed">提交后</a-radio-button>
                <a-radio-button value="rolled-back">回滚</a-radio-button>
            </a-radio-group>
        </div>
        <div style="margin-top: 10px;" v-show="bpmnProperties.TaskListener.listenerType == 'classListener'">
            <span style="width:30%;display:inline-block;">类:</span>
            <a-input style="width:70%;" placeholder="请输入类" v-model:value="bpmnProperties.TaskListener.class" />
        </div>
        <div style="margin-top: 10px;" v-show="bpmnProperties.TaskListener.listenerType == 'expressionListener'">
            <span style="width:30%;display:inline-block;">表达式:</span>
            <a-input style="width:70%;" placeholder="请输入表达式" v-model:value="bpmnProperties.TaskListener.expression" />
        </div>
        <div style="margin-top: 10px;"
            v-show="bpmnProperties.TaskListener.listenerType == 'delegateExpressionListener'">
            <span style="width:30%;display:inline-block;">代理表达式:</span>
            <a-input style="width:70%;" placeholder="请输入代理表达式"
                v-model:value="bpmnProperties.TaskListener.delegateExpression" />
        </div>
        <div style="margin-top: 10px;" v-show="bpmnProperties.TaskListener.listenerType == 'scriptListener'">
            <span style="width:30%;display:inline-block;">脚本格式:</span>
            <a-input style="width:70%;" placeholder="请输入脚本" v-model:value="bpmnProperties.TaskListener.scriptFormat" />
        </div>
        <hr style="border-top: 1px dashed #000;" />
        <div style="display: flex; justify-content: space-between; align-items: center;">
            <span>
                <TableOutlined /><label style="margin-left: 5px;">注入字段</label>
            </span>
            <a-button type="primary" style="margin-top: 10px;" size="small" @click="addTaskListenersField">
                <template #icon>
                    <PlusOutlined />
                </template>
                创建字段</a-button>
        </div>
        <div style="margin-top: 10px;">
            <a-table :columns="panelProperties.TaskListenersFieldColumns" size="small" rowKey="id"
                :data-source="bpmnProperties.TaskListenersFieldDataSource" :pagination="false" bordered>
                <template v-for="col in ['name', 'fieldType', 'value']" #[col]="{ text, record }" :key="col">
                    <div>
                        <template v-if="TaskListenersFieldEditableData[record.id]">
                            <a-input v-if="col != 'fieldType'"
                                v-model:value="TaskListenersFieldEditableData[record.id][col]" style="margin: -5px 0" />
                            <a-select v-else-if="col == 'fieldType'"
                                v-model:value="TaskListenersFieldEditableData[record.id][col]"
                                style="margin: -5px 0;width:90px;">
                                <a-select-option value="string">字符串</a-select-option>
                                <a-select-option value="expression">表达式</a-select-option>
                            </a-select>
                        </template>
                        <template v-else-if="col == 'fieldType'">
                            {{ text == undefined ? text : taskListenerFieldType[text] }}
                        </template>
                        <template v-else>
                            {{ text }}
                        </template>
                    </div>
                </template>
                <template #operation="{ record }">
                    <div class="editable-row-operations">
                        <span v-if="TaskListenersFieldEditableData[record.id]">
                            <a @click="saveTaskListenersField(record.id)">保存</a>
                            <a-popconfirm title="确定退出?" @confirm="cancelTaskListenersField(record.id)">
                                <a>退出</a>
                            </a-popconfirm>
                        </span>
                        <span v-else>
                            <a @click="editTaskListenersField(record.id)">编辑</a>
                            <span v-if="record.id != undefined">
                                <a @click="delTaskListenersField(record.id)">删除</a>
                            </span>
                        </span>
                    </div>
                </template>
            </a-table>
        </div>
    </a-modal>

    <!--事件监听器-->
    <a-modal title="添加事件监听器" v-model:visible="model_event_listener_visible" :confirm-loading="confirmLoading"
        @ok="model_event_listener_handleOk">
        <div style="margin-top: 10px;">
            <span style="width:30%;display:inline-block;">事件类型:</span>
            <a-select v-model:value="bpmnProperties.EventListener.events" mode="multiple"
                style="line-height:0 !important;width:70%;">
                <a-select-option value="ENTITY_CREATED">ENTITY_CREATED</a-select-option>
                <a-select-option value="ENTITY_INITIALIZED">ENTITY_INITIALIZED</a-select-option>
                <a-select-option value="ENTITY_UPDATED">ENTITY_UPDATED</a-select-option>
                <a-select-option value="ENTITY_DELETED">ENTITY_DELETED</a-select-option>
                <a-select-option value="ENTITY_SUSPENDED">ENTITY_SUSPENDED</a-select-option>
                <a-select-option value="ENTITY_ACTIVATED">ENTITY_ACTIVATED</a-select-option>
                <a-select-option value="TIMER_SCHEDULED">TIMER_SCHEDULED</a-select-option>
                <a-select-option value="TIMER_FIRED">TIMER_FIRED</a-select-option>
                <a-select-option value="JOB_CANCELED">JOB_CANCELED</a-select-option>
                <a-select-option value="JOB_EXECUTION_SUCCESS">JOB_EXECUTION_SUCCESS</a-select-option>
                <a-select-option value="JOB_EXECUTION_FAILURE">JOB_EXECUTION_FAILURE</a-select-option>
                <a-select-option value="JOB_RETRIES_DECREMENTED">JOB_RETRIES_DECREMENTED</a-select-option>
                <a-select-option value="CUSTOM">CUSTOM</a-select-option>
                <a-select-option value="ENGINE_CREATED">ENGINE_CREATED</a-select-option>
                <a-select-option value="ENGINE_CLOSED">ENGINE_CLOSED</a-select-option>
                <a-select-option value="ACTIVITY_STARTED">ACTIVITY_STARTED</a-select-option>
                <a-select-option value="ACTIVITY_COMPLETED">ACTIVITY_COMPLETED</a-select-option>
                <a-select-option value="ACTIVITY_CANCELLED">ACTIVITY_CANCELLED</a-select-option>
                <a-select-option value="ACTIVITY_SIGNALED">ACTIVITY_SIGNALED</a-select-option>
                <a-select-option value="ACTIVITY_COMPENSATE">ACTIVITY_COMPENSATE</a-select-option>
                <a-select-option value="ACTIVITY_MESSAGE_WAITING">ACTIVITY_MESSAGE_WAITING</a-select-option>
                <a-select-option value="ACTIVITY_MESSAGE_RECEIVED">ACTIVITY_MESSAGE_RECEIVED</a-select-option>
                <a-select-option value="ACTIVITY_ERROR_RECEIVED">ACTIVITY_ERROR_RECEIVED</a-select-option>
                <a-select-option
                    value="HISTORIC_ACTIVITY_INSTANCE_CREATED">HISTORIC_ACTIVITY_INSTANCE_CREATED</a-select-option>
                <a-select-option
                    value="HISTORIC_ACTIVITY_INSTANCE_ENDED">HISTORIC_ACTIVITY_INSTANCE_ENDED</a-select-option>
                <a-select-option value="SEQUENCEFLOW_TAKEN">SEQUENCEFLOW_TAKEN</a-select-option>
                <a-select-option value="UNCAUGHT_BPMN_ERROR">UNCAUGHT_BPMN_ERROR</a-select-option>
                <a-select-option value="VARIABLE_CREATED">VARIABLE_CREATED</a-select-option>
                <a-select-option value="VARIABLE_UPDATED">VARIABLE_UPDATED</a-select-option>
                <a-select-option value="VARIABLE_DELETED">VARIABLE_DELETED</a-select-option>
                <a-select-option value="TASK_CREATED">TASK_CREATED</a-select-option>
                <a-select-option value="TASK_ASSIGNED">TASK_ASSIGNED</a-select-option>
                <a-select-option value="TASK_COMPLETED">TASK_COMPLETED</a-select-option>
                <a-select-option value="TASK_TERMINATED">TASK_TERMINATED</a-select-option>
                <a-select-option value="TASK_TRANSFERED">TASK_TRANSFERED</a-select-option>
                <a-select-option value="TASK_RETURN_TO">TASK_RETURN_TO</a-select-option>
                <a-select-option value="PROCESS_STARTED">PROCESS_STARTED</a-select-option>
                <a-select-option value="PROCESS_COMPLETED">PROCESS_COMPLETED</a-select-option>
                <a-select-option
                    value="PROCESS_COMPLETED_WITH_ERROR_END_EVENT">PROCESS_COMPLETED_WITH_ERROR_END_EVENT</a-select-option>
                <a-select-option value="PROCESS_CANCELLED">PROCESS_CANCELLED</a-select-option>
                <a-select-option
                    value="HISTORIC_PROCESS_INSTANCE_CREATED">HISTORIC_PROCESS_INSTANCE_CREATED</a-select-option>
                <a-select-option
                    value="HISTORIC_PROCESS_INSTANCE_ENDED">HISTORIC_PROCESS_INSTANCE_ENDED</a-select-option>
                <a-select-option value="MEMBERSHIP_CREATED">MEMBERSHIP_CREATED</a-select-option>
                <a-select-option value="MEMBERSHIP_DELETED">MEMBERSHIP_DELETED</a-select-option>
                <a-select-option value="MEMBERSHIPS_DELETED">MEMBERSHIPS_DELETED</a-select-option>
                <a-select-option value="DEBUG_LOGGER">DEBUG_LOGGER</a-select-option>
            </a-select>
        </div>
        <div style="margin-top: 10px;">
            <span style="width:30%;display:inline-block;">抛出事件:</span>
            <a-radio-group v-model:value="panelProperties.Panels.IsThrowEvent" size="small">
                <a-radio-button :value="true">是</a-radio-button>
                <a-radio-button :value="false">否</a-radio-button>
            </a-radio-group>
        </div>
        <div v-show="panelProperties.Panels.IsThrowEvent == false">
            <div style="margin-top: 10px;">
                <span style="width:30%;display:inline-block;">监听器类型:</span>
                <a-radio-group v-model:value="bpmnProperties.EventListener.listenerType" size="small">
                    <a-radio-button value="classListener">类</a-radio-button>
                    <a-radio-button value="delegateExpressionListener">代理表达式</a-radio-button>
                </a-radio-group>
            </div>
            <div style="margin-top: 10px;">
                <span style="width:30%;display:inline-block;">监听器:</span>
                <a-input style="width:70%;" placeholder="请输入监听器"
                    v-model:value="bpmnProperties.EventListener.delegateExpressionOrClass" />
            </div>
            <div style="margin-top: 10px;">
                <span style="width:30%;display:inline-block;">实体类型:</span>
                <a-select v-model:value="bpmnProperties.EventListener.entityType"
                    style="width: 70%;line-height:0 !important;">
                    <a-select-option value="attachment">attachment</a-select-option>
                    <a-select-option value="comment">comment</a-select-option>
                    <a-select-option value="execution">execution</a-select-option>
                    <a-select-option value="identity-link">identity-link</a-select-option>
                    <a-select-option value="job">job</a-select-option>
                    <a-select-option value="process-definition">process-definition</a-select-option>
                    <a-select-option value="process-instance">process-instance</a-select-option>
                    <a-select-option value="task">task</a-select-option>
                </a-select>
            </div>
        </div>

        <div v-show="panelProperties.Panels.IsThrowEvent == true">
            <div style="margin-top: 10px;">
                <span style="width:30%;display:inline-block;">抛出事件类型:</span>
                <a-select v-model:value="bpmnProperties.EventListener.throwEvent" @change="throwEventChange"
                    style="width: 70%;line-height:0 !important;">
                    <a-select-option value="message">消息</a-select-option>
                    <a-select-option value="signal">信号</a-select-option>
                    <a-select-option value="globalSignal">全局信号</a-select-option>
                    <a-select-option value="error">错误</a-select-option>
                </a-select>
            </div>
            <div style="margin-top: 10px;">
                <span style="width:30%;display:inline-block;">抛出事件:</span>
                <a-select v-model:value="bpmnProperties.EventListener.throwEventVal"
                    :options="panelProperties.EventListenerThrowEventValOptions"
                    style="width: 70%;line-height:0 !important;">
                </a-select>
            </div>
        </div>
    </a-modal>

    <!-- 配置自定义表单 -->
    <a-modal title="配置内置表单" v-model:visible="model_innerformconfig_visible" :confirm-loading="confirmLoading"
        @ok="model_innerformconfig_handleOk" width="900px">
        <div class="table__top"
            style="border: 1px dashed #ccc; border-radius: 8px; display: flex; align-items: center;">
            <div style="display: flex; align-items: center; width: 80%; padding:10px;">
                <a-form-item label="表单名" style="width: calc(50% - 10px); display: flex; margin-bottom:0 !important;">
                    <a-input v-model:value="flowFormConfigFormState.FormName" style="width: 150px;" />
                </a-form-item>
                <a-form-item label="表单名" style="width: calc(50% - 10px); display: flex; margin-bottom:0 !important;">
                    <a-input v-model:value="flowFormConfigFormState.FormName" style="width: 150px;" />
                </a-form-item>
            </div>
            <div class="table__top_select"
                style="display: flex; align-items: center; justify-content: flex-end; width: 20%;">
                <a-button type="primary" @click="query">查询</a-button>
                <a-button class="top_btn" @click="resetQuery">重置</a-button>
            </div>
        </div>
        <a-tabs v-model:activeKey="formTabActiveKey" @change="formTabAChange">
            <a-tab-pane key="0" tab="自定义表单">
                <a-table :columns="panelProperties.InnerFormcolumns" size="small" :pagination="false" rowKey="Id"
                    :data-source="bpmnProperties.InnerFormDataSource" bordered>
                    <template #operation="{ record }">
                        <div class="editable-row-operations">
                            <span>
                                <a @click="selectInnerForm(record)">调取</a>
                            </span>
                        </div>
                    </template>
                </a-table>
            </a-tab-pane>

            <a-tab-pane key="1" tab="在线表单">
                <a-table :columns="panelProperties.OnlineFormcolumns" size="small" :pagination="onlineFormPagination" rowKey="Id"
                    :data-source="bpmnProperties.OnlineFormDataSource" bordered>
                    <template #operation="{ record }">
                        <div class="editable-row-operations">
                            <span>
                                <a @click="selectOnlineForm(record)">调取</a>
                            </span>
                        </div>
                    </template>
                </a-table>
            </a-tab-pane>
        </a-tabs>
        <hr style="border-top: 1px dashed #000;" />
        <a-form ref="formRef" :model="flowFormConfigFormState" :label-col="labelCol" :wrapper-col="wrapperCol"
            layout="inline" class="comform">
            <a-form-item label="表单名" style="width: calc(50% - 20px);" class="form__item" name="FormName">
                <a-input v-model:value="flowFormConfigFormState.FormName" :disabled="true" />
            </a-form-item>
            <a-form-item label="表单编码" style="width: calc(50% - 20px);" class="form__item" name="FormCode">
                <a-input v-model:value="flowFormConfigFormState.FormCode" />
            </a-form-item>
            <a-form-item v-show="formTabActiveKey=='0'" label="表单路径" style="width: calc(50% - 20px);" class="form__item" name="FormPath">
                <a-input v-model:value="flowFormConfigFormState.FormPath" />
            </a-form-item>
            <a-form-item label="序号" style="width: calc(50% - 20px);" class="form__item" name="Mobile">
                <a-input v-model:value="flowFormConfigFormState.SortNum" />
            </a-form-item>
            <a-form-item label="节点ID" style="width: calc(50% - 20px);" class="form__item" name="NodeId">
                <a-input v-model:value="flowFormConfigFormState.NodeId" />
            </a-form-item>
            <a-form-item label="表单类型" style="width: calc(50% - 20px);" class="form__item" name="FormCode">
                <a-select v-model:value="flowFormConfigFormState.FormType" :disabled="true" 
                     >
                    <a-select-option :value="1">自定义表单</a-select-option>
                    <a-select-option :value="2">在线表单</a-select-option>
                    </a-select> 
            </a-form-item>
            <a-form-item label="是否只读" style="width: calc(50% - 20px);" class="form__item" name="Email">
                <a-checkbox v-model:checked="flowFormConfigFormState.IsReadonly"></a-checkbox>
            </a-form-item>
            <a-form-item label="是否显示" style="width: calc(50% - 20px);" class="form__item" name="IsShow">
                <a-checkbox v-model:checked="flowFormConfigFormState.IsShow"></a-checkbox>
            </a-form-item>
        </a-form>
    </a-modal>
    <Modal ref="bpmnDetailModal" :bpmnXML="bpmnXML"></Modal>
</template>

<script lang="ts">
import { UnwrapRef, defineComponent, watch, ref, getCurrentInstance, onMounted, onBeforeMount, nextTick, reactive, markRaw, toRaw, VNode, h } from 'vue';
import BpmnModeler from 'bpmn-js/lib/Modeler'; // 引入 bpmn-js
import { message, notification } from 'ant-design-vue';
import { getUserDataList } from '@/api/syssetting/user';
import { cloneDeep, constant } from 'lodash-es';
import { CustomIdPrefix, CustomId } from '@/components/id/idGenerater';
import camundaModdleDescriptor from '@/components/camunda-bpmn-moddle/camundaDescriptor.json';
import Modal from './bpmnDetail.vue';
import { getAllRoleListData } from '@/api/syssetting/role';
import { createListenerObject, updateElementExtensions } from "./utils";

// 标签解析 Extension
import camundaModdleExtension from "@/components/extension-moddle/camunda";
import activitiModdleExtension from "@/components/extension-moddle/activiti";
import flowableModdleExtension from "@/components/extension-moddle/flowable";

// 模拟流转流程
import tokenSimulation from "bpmn-js-token-simulation";
import ToggleMode from 'bpmn-js-token-simulation/lib/features/toggle-mode/modeler/ToggleMode';
import {
    CaretRightOutlined, PlusOutlined, UserOutlined, SendOutlined, ZoomInOutlined,
    ZoomOutOutlined, AlignLeftOutlined, AlignCenterOutlined, AlignRightOutlined, VerticalAlignTopOutlined,
    VerticalAlignMiddleOutlined, VerticalAlignBottomOutlined, EyeOutlined, TableOutlined
} from '@ant-design/icons-vue';
// camunda 官方侧边栏扩展
import { BpmnPropertiesPanelModule, BpmnPropertiesProviderModule, CamundaPlatformPropertiesProviderModule } from 'bpmn-js-properties-panel';
import { saveBpmnXml } from '@/api/flowModel';
import { start } from 'repl';
import { options } from '@/api/table';
import { group } from 'console';
import { listeners } from 'process';
import { SortOrder } from 'element-plus/es/components/table-v2/src/constants';
import { getAllFormData, deleteInnerForm, saveOrUpdateNodeForm, getNodeFormData, delNodeFormData } from '@/api/workflow/innerform';
import { Item } from 'ant-design-vue/lib/menu';
import {getData as getOnlineFormPageList} from '@/api/form/form'

interface ExtendedAttributeDataItem {
    value: string;
    id: string;
    name: string;
}

interface FormDataItem {
    Id: string;
    IsReadonly: Boolean;
    FormId: string;
    FormCode: string;
    SortNum: number;
    NodeId: string;
    FormName: string;
    FormPath: string;
    IsAllowSave: Boolean;
    IsShow: Boolean;
    FormType: Number,
    FormContent: string
}

interface GlobalEventBaseDataItem {
    id: string;
    name: string;
}

interface GlobalSingalEventDataItem extends GlobalEventBaseDataItem {
    scope: string;
}

interface GlobalErrorEventDataItem extends GlobalEventBaseDataItem {
    errorCode: string;
}

interface GlobalEscalationEventDataItem extends GlobalEventBaseDataItem {
    escalationCode: string;
}

interface TaskListenerDataItem {
    value: string;
    id: string;
    name: string;
    fieldType: string;
}

export const taskListenerType = {
    classListener: "类",
    expressionListener: "表达式",
    delegateExpressionListener: "代理表达式",
    scriptListener: "脚本"
};

export const taskEventListener = {
    classListener: "类",
    delegateExpressionListener: "代理表达式",
    signal: '信号',
    message: '消息',
    error: '错误',
    grobalSignal: '全局信号'
};



export const taskListenerEventType = {
    create: "创建",
    assignment: "指派",
    complete: "完成",
    delete: "删除",
    update: "更新",
    timeout: "超时"
};

export const taskExecuteListenerEventType = {
    start: "开始",
    take: "启用",
    end: "结束"
};

export const taskListenerFieldType = {
    string: "字符串",
    expression: "表达式"
};

export const singalScopeType = {
    global: "全局",
    processInstance: "当前实例"
};

export default defineComponent({
    name: 'flowDesignerModal',
    emits: ['ok', 'cancel'],
    props: {
        editItem: {
            type: Object,
            required: true
        },
    },
    components: {
        CaretRightOutlined,
        PlusOutlined,
        UserOutlined,
        SendOutlined,
        ZoomInOutlined,
        ZoomOutOutlined,
        AlignLeftOutlined,
        AlignCenterOutlined,
        AlignRightOutlined,
        VerticalAlignTopOutlined,
        VerticalAlignBottomOutlined,
        VerticalAlignMiddleOutlined,
        EyeOutlined,
        TableOutlined,
        Modal
    },
    setup(props, context) {
        let bpmnModeler: any;
        // 弹框显隐
        let show = ref<boolean>(false);

        let bpmnProperties = ref({
            General: {
                id: null,
                name: null,
                initiator: null,
                skipExpression: null,
                async: false,
            },
            FlowconfigurationValue: '',
            FlowconfigurationCondition: '',
            UserTaskSpecifyAllocation: 'assigner',
            ApproverDataSource: [],
            FlowconfigurationDataSource: [],
            TaskExecuteListenerDataSource: [],
            TaskEventListenerDataSource: [],
            TaskListenersFieldDataSource: [],
            TaskListenerDataSource: [],
            InnerFormDataSource: [],
            OnlineFormDataSource: [],
            AssigneeSetting: {
                Assignee: '',
                CandidateGroups: [],
                CandidateUsers: [],
                CandidateGroupsStr: '',
                CandidateUsersStr: '',
                DueDate: '',
                Priority: null,
            },
            MultiInstance: {
                MultiInstanceValue: '',
                LoopInstanceForm: {
                    MultiInstanceCondition: '',
                    MultiInstancePercentageCondition: '',
                    MultiInstancePercentageConditionVal: null,
                    MultiInstanceNumberCondition: '',
                    MultiInstanceNumberConditionVal: null,
                    MultiInstanceConditionExpression: null,
                    LoopCardinality: '',
                    Collection: '',
                    ElementVariable: '',
                    CompletionCondition: '',
                    TimeCycle: null,
                    AsyncBefore: false,
                    AsyncAfter: false,
                    Exclusive: false,
                }
            },
            DescriptionDoc: {
                documentation: null
            },
            TaskListener: {
                id: '',
                event: '',
                listenerType: '',
                onTransaction: '',
                class: '',
                scriptFormat: '',
                expression: '',
                delegateExpression: '',
                fields: []
            },
            EventListener: {
                id: '',
                events: [],
                throwEvent: '',
                throwEventVal: '',
                delegateExpressionOrClass: '',
                entityType: '',
                listenerType: 'classListener',
            },
            ExtendedAttributeDataSource: [],
            MessageEventDataSource: [],
            ErrorListDataSource: [],
            SingalListDataSource: [],
            UpdateListDataSource: [],
            FormDataSource: [],
        })
        //let editItem: any;

        // 弹框路由loading
        let modalLoading = ref<boolean>(false);
        const ExtendedAttributeEditableData: UnwrapRef<Record<string, ExtendedAttributeDataItem>> = reactive({});

        let panelProperties = ref({
            PanelActiveKey: '',
            UserTaskActiveKey: 'fixedVal',
            GlobalEventsActiveKey: '',
            PanelexpandVal: true,
            ListenerType: '',
            Panels: {
                FlowconfigurationShow: false,
                ShowInitiator: false,
                ShowAsync: false,
                ShowSkipExpression: false,
                ShowUserTask: false,
                ShowFreeApproval: false,
                ShowGlobalEvents: false,
                ShowEventListener: false,
                ShowTaskListener: false,
                ShowMultiInstance: false,
                ShowForm: false,
                IsThrowEvent: false
            },
            Assigner: {
                AssignerOptions: [],
                CandidateGroupsOptions: [],
            },
            EventListenerThrowEventValOptions: [],
            InnerFormcolumns: [
                { title: '表单名称', dataIndex: 'FormName' },
                { title: '表单编码', dataIndex: 'FormCode' },
                { title: '表单路径', dataIndex: 'FormPath' },
                {
                    title: '是否有效', dataIndex: 'IsValid', customRender: function ({ text }): VNode {
                        return h('div', {
                            style: {
                                color: 'red'
                            }
                        }, text == 1 ? '有效' : '无效');
                    }
                },
                { title: '创建时间', dataIndex: 'CreateTime' },
                { title: '操作', dataIndex: 'operation', slots: { customRender: 'operation' } }
            ],
            OnlineFormcolumns: [
                { title: '表单名称', dataIndex: 'Name' },
                { title: '表单编码', dataIndex: 'FormCode' },             
                
                { title: '创建时间', dataIndex: 'CreateTime' },
                { title: '操作', dataIndex: 'operation', slots: { customRender: 'operation' } }
            ],
            FormColumns: [
                {
                    title: '表单名称', dataIndex: 'FormName'
                },
                { title: '序号', dataIndex: 'SortNum', width: '15%' },
                {
                    title: '只读', dataIndex: 'IsReadonly', customRender: function ({ text }): VNode {
                        return h('div', {
                            style: {
                                color: 'red'
                            }
                        }, text == true ? '是' : '否');
                    }
                },
                {
                    title: '显示', dataIndex: 'IsShow', customRender: function ({ text }): VNode {
                        return h('div', {
                            style: {
                                color: 'red'
                            }
                        }, text == true ? '是' : '否');
                    }
                },
                { title: '操作', dataIndex: 'operation', slots: { customRender: 'operation' } }
            ],
            ApproverColumns: [
                { title: '序号', dataIndex: 'Id', },
                { title: '名称', dataIndex: 'Name' },
                { title: '编码', dataIndex: 'Key' },
                { title: '是否多选', dataIndex: 'Category' }
            ],
            FlowconfigurationColumns: [
                { title: '序号', dataIndex: 'Id', },
                { title: '名称', dataIndex: 'Name' },
                { title: '编码', dataIndex: 'Key' }
            ],
            TaskExecuteListenerColumns: [
                { title: '事件类型', dataIndex: 'event', customRender: function ({ text }) { return taskExecuteListenerEventType[text]; } },
                { title: '监听器类型', dataIndex: 'listenerType', customRender: function ({ text }) { return taskListenerType[text]; } },
                { title: '操作', dataIndex: 'operation', slots: { customRender: 'operation' } }
            ],
            TaskListenerColumns: [
                { title: '事件类型', dataIndex: 'event', customRender: function ({ text }) { return taskListenerEventType[text]; } },
                { title: '监听器类型', dataIndex: 'listenerType', customRender: function ({ text }) { return taskListenerType[text]; } },
                { title: '操作', dataIndex: 'operation', slots: { customRender: 'operation' } }
            ],
            TaskEventListenerColumns: [
                {
                    title: '事件类型', dataIndex: 'events', width: '30%', customRender: ({ text }) => {
                        let t = text.join(', ');
                        const maxLength = 10; // 设置最大显示的字符数 
                        if (t.length > maxLength) {
                            return t.slice(0, maxLength) + '...';
                        } else {
                            return t;
                        }
                    }
                },
                {
                    title: '监听器类型', dataIndex: 'listenerType', customRender: ({ text }) => {
                        return taskEventListener[text];
                    }
                },
                { title: '监听器', dataIndex: 'delegateExpressionOrClass' },
                { title: '操作', dataIndex: 'operation', slots: { customRender: 'operation' } }
            ],
            TaskListenersFieldColumns: [
                { title: '字段名', dataIndex: 'name', width: '20%', slots: { customRender: 'name', } },
                { title: '字段类型', dataIndex: 'fieldType', width: '20%', slots: { customRender: 'fieldType', } },
                { title: '字段值', dataIndex: 'value', slots: { customRender: 'value', } },
                { title: '操作', dataIndex: 'operation', slots: { customRender: 'operation' } }
            ],
            ExtendedAttributeColumns: [
                { title: '属性名', dataIndex: 'name', width: '20%', slots: { customRender: 'name', } },
                { title: '属性值', dataIndex: 'value', slots: { customRender: 'value', } },
                { title: '操作', dataIndex: 'operation', slots: { customRender: 'operation' } }
            ],
            MessageEventColumns: [
                { title: '名称', dataIndex: 'name', width: '60%', slots: { customRender: 'name', } },
                { title: '操作', dataIndex: 'operation', slots: { customRender: 'operation' } }
            ],
            ErrorListColumns: [
                { title: '名称', dataIndex: 'name', slots: { customRender: 'name', } },
                { title: '错误编码', dataIndex: 'errorCode', slots: { customRender: 'errorCode', } },
                { title: '操作', dataIndex: 'operation', slots: { customRender: 'operation' } }
            ],
            SingalListColumns: [
                { title: '名称', dataIndex: 'name', slots: { customRender: 'name', } },
                { title: '作用域', dataIndex: 'scope', slots: { customRender: 'scope', } },//global processInstance
                { title: '操作', dataIndex: 'operation', slots: { customRender: 'operation' } }
            ],
            UpdateListColumns: [
                { title: '名称', dataIndex: 'name', slots: { customRender: 'name', } },
                { title: '升级编码', dataIndex: 'escalationCode', slots: { customRender: 'escalationCode', } },
                { title: '操作', dataIndex: 'operation', slots: { customRender: 'operation' } }
            ]
        });


        const editExtendedAttribute = (key: string) => {
            ExtendedAttributeEditableData[key] = cloneDeep(bpmnProperties.value.ExtendedAttributeDataSource.filter(item => key === item.id)[0]);
        };
        const saveExtendedAttribute = (key: string) => {
            Object.assign(bpmnProperties.value.ExtendedAttributeDataSource.filter(item => key === item.id)[0], ExtendedAttributeEditableData[key]);
            saveAttribute(ExtendedAttributeEditableData[key]);
            delete ExtendedAttributeEditableData[key];
        };

        const cancelExtendedAttribute = (key: string) => {
            delete ExtendedAttributeEditableData[key];
        };

        const delExtendedAttribute = (key: string) => {
            delete ExtendedAttributeEditableData[key];
            removeAttributes(key);
        };

        const addExtendedAttribute = () => {
            let id = CustomIdPrefix('Property');
            bpmnProperties.value.ExtendedAttributeDataSource.push({ id: id });
        }

        const bpmnDetailModal = ref()
        const bpmnXML = ref('');
        async function bpmnDetailShow() {
            const result = await bpmnModeler.saveXML({ format: true });
            const { xml } = result;
            bpmnXML.value = xml;
            bpmnDetailModal.value.open();
        }

        // watch(panelProperties.value.PanelActiveKey, val => {
        //     console.log(val);
        // });

        const additionalModules = () => {
            const Modules = [];
            // 模拟流转模块
            Modules.push(tokenSimulation);
            Modules.push(flowableModdleExtension);
            return Modules;
        }

        let defaultZoom = 1;
        const processZoomOut = (event: PointerEvent, zoomStep = 0.1) => {
            let newZoom = Math.floor(defaultZoom * 100 - zoomStep * 100) / 100;
            if (newZoom < 0.2) {
                throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
            }
            defaultZoom = newZoom;
            bpmnModeler.get("canvas").zoom(defaultZoom);
        }

        const processZoomIn = (event: PointerEvent, zoomStep = 0.1) => {
            let newZoom = Math.floor(defaultZoom * 100 + zoomStep * 100) / 100;
            if (newZoom > 4) {
                throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");
            }
            defaultZoom = newZoom;

            bpmnModeler.get("canvas").zoom(defaultZoom);
        }

        const processZoomTo = (event: PointerEvent, newZoom = 1) => {
            if (newZoom < 0.2) {
                throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
            }
            if (newZoom > 4) {
                throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");
            }
            defaultZoom = newZoom;
            bpmnModeler.get("canvas").zoom(newZoom);
        }

        const updateFlowType = (flowTypeEvent: any) => {
            let flowType = flowTypeEvent.target.value;
            // 正常条件类
            if (flowType === "condition") {
                let flowConditionRef = bpmnModeler.get('moddle').create("bpmn:FormalExpression");
                let properties: any = {};
                properties['conditionExpression'] = flowConditionRef;
                //bpmnProperties.value[propertieName][type] = value;
                // element.businessObject[type] = value;
                updateProperties(properties); // 调用属性更新方法                
                return;
            }

            // 默认路径
            if (flowType === "default") {
                bpmnModeler.get('modeling').updateProperties(element, {
                    conditionExpression: null
                });
                bpmnModeler.get('modeling').updateProperties(element.source, {
                    default: element
                });
                return;
            }

            // 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
            if (element.businessObject.sourceRef.default && element.businessObject.sourceRef.default.id === element.id) {
                bpmnModeler.get('modeling').updateProperties(element.source, {
                    default: null
                });
            }

            bpmnModeler.get('modeling').updateProperties(element, {
                conditionExpression: null
            });

        }

        const updateFlowCondition = (event: any) => {
            //let { conditionType, scriptType, body, resource, language } = this.flowConditionForm;
            let val = event.target.value;
            let condition;
            let conditionType = "expression";
            if (conditionType === "expression") {
                condition = bpmnModeler.get('moddle').create("bpmn:FormalExpression", { val });
            }
            // else {
            //     if (scriptType === "inlineScript") {
            //     condition = bpmnModeler.get('moddle').create("bpmn:FormalExpression", { body, language });
            //     //this.$set(this.flowConditionForm, "resource", "");
            //     } else {
            //     //this.$set(this.flowConditionForm, "body", "");
            //     condition = bpmnModeler.get('moddle').create("bpmn:FormalExpression", { resource, language });
            //     }
            // }
            bpmnModeler.get('modeling').updateProperties(element, { conditionExpression: condition });
        }


        const elementsAlign = (align: String) => {
            const Align = bpmnModeler.get("alignElements");
            const Selection = bpmnModeler.get("selection");
            const SelectedElements = Selection.get();
            if (!SelectedElements || SelectedElements.length <= 1) {
                message.warning("请按住 Ctrl 键选择多个元素对齐");
                return;
            }
            Align.trigger(SelectedElements, align);
        }

        const processReZoom = (event: PointerEvent) => {
            defaultZoom = 1;
            bpmnModeler.get("canvas").zoom("fit-viewport", "auto");
        }

        const processRedo = (event: PointerEvent) => {
            bpmnModeler.get("commandStack").redo();
        }

        const processUndo = (event: PointerEvent) => {
            bpmnModeler.get("commandStack").undo();
        }

        //@Deac: 切换模拟
        const SwitchMock = () => {
            bpmnModeler.get("toggleMode").toggleMode();
        }

        // @Desc: 弹框打开方法(供父组件调用)
        const open = () => {
            nextTick(() => {
                //initBpmn();

                if (props.editItem != null && props.editItem.MetaInfo != null) {
                    createNewDiagram(props.editItem.MetaInfo);
                } else {
                    let id = CustomId();
                    let processid = "process_" + id;
                    let diagramid = "diagram_" + id;
                    let name = props.editItem.Name;
                    let xml = `<?xml version="1.0" encoding="UTF-8"?>
                                <bpmn2:definitions 
                                xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                                xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
                                xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
                                xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
                                xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
                                id="${diagramid}"
                                targetNamespace="http://bpmn.io/schema/bpmn">
                                <bpmn2:process id="${processid}" name="${name}" isExecutable="true">
                                </bpmn2:process>
                                <bpmndi:BPMNDiagram id="BPMNDiagram_1">
                                    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="${processid}">
                                    </bpmndi:BPMNPlane>
                                </bpmndi:BPMNDiagram>
                                </bpmn2:definitions>`;
                    createNewDiagram(xml);
                    //bpmnModeler.createDiagram();
                    // const rootElement = bpmnModeler.getDefinitions();
                    // const processElement = rootElement.rootElements.find(element => element.$type === 'bpmn:Process');
                    // const modeling = bpmnModeler.get('modeling');
                    // modeling.updateProperties(processElement, { id: processid, name: name });
                    // modeling.updateProperties(rootElement, { id: diagramid});
                    // const bpmnDiagram = rootElement.diagrams[0]; // 假设只有一个BPMNDiagram
                    // const bpmnPlane = bpmnDiagram.plane; // 获取BPMNPlane
                    // modeling.updateProperties(bpmnPlane, { id: processid});
                }
                show.value = true;
                //暂时不知道如何关闭默认的按钮
                var ele = document.getElementsByClassName("bts-toggle-mode")[0];
                ele.setAttribute('style', "display:none");
            });
        }

        // @Desc: 弹框关闭方法(供父组件调用)
        const close = () => {
            show.value = false;
            modalLoading.value = false;
            context.emit('cancel')
        }

        // 注意：必须先加载一个bpmn文件，新建就是加载一个空的bpmn文件，否则不能拖拽节点
        const createNewDiagram = async (bpmn: any) => {
            // 将字符串转换成图显示出来
            try {
                const result = await bpmnModeler.importXML(bpmn);
                // state.bpmnModeler.get('canvas').zoom('fit-viewport');
                const { warnings } = result;
            } catch (e) {
                message.error('打开模型出错，数据格式有误！')
                console.log('error--->', e)
            }
        };

        // @desc: 弹框确认事件(回调)
        const modalOk = () => {
            context.emit('ok');
        }

        // @desc: 保存流程BPMN
        async function SaveBpmnXml() {
            const result = await bpmnModeler.saveXML({ format: true });
            const { xml } = result;
            saveBpmnXml({ id: props.editItem.Id, MetaInfo: xml }).then(e => {
                message.success("保存成功！")
            }).catch(err => {
                message.error(err.message || "保存失败!")
            })
        }


        // @desc: 弹框取消事件(回调)
        const modalCancel = () => {
            context.emit('cancel')
            show.value = false
            modalLoading.value = false
        }



        onBeforeMount(() => {
            getUserDataList().
                then(e => {
                    let userArr = [];
                    let data = e.data.Data;
                    for (var d in data) {
                        userArr.push({ label: data[d].RealName, value: data[d].Id.toString() });
                    }
                    eventTypesArr.eventTypes = userArr;
                    panelProperties.value.Assigner.AssignerOptions = userArr;

                }).catch(err => {
                    message.error(err.message || "获取用户信息失败!")
                })

        });

        onMounted(() => {
            nextTick(() => {
                initBpmn();
                InitGetUserList();
            });
        });

        const customStyle =
            'background: #f7f7f7;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden';
        //获取全部的用户信息
        function InitGetUserList() {

        }

        const switchPanel = (type: string) => {
            switch (type) {
                case 'bpmn:UserTask':
                    {
                        break;
                    }
                case 'bpmn:Process':
                    {
                        ControlShow(['ShowGlobalEvents', 'ShowEventListener']);
                        break;
                    }
                default:
                    break;
            }
        }

        function ControlShow(showPanels: String[]) {
            let item: String;
            for (item in panelProperties.value.Panels) {
                if (showPanels.includes(item)) {
                    panelProperties.value.Panels[item] = true;
                } else {
                    panelProperties.value.Panels[item] = false;
                }
            }
        }

        function initBpmn() {
            // 获取到属性ref为“canvas”的dom节点
            let canvas: any = document.getElementById('container');

            // 创建BpmnModeler
            bpmnModeler = new BpmnModeler({
                container: canvas,
                additionalModules: additionalModules(),
                // 加入工具栏支持
                // propertiesPanel: {
                //     parent: '#js-properties-panel'
                // },
                // additionalModules: [
                //     tokenSimulation,
                //     // BpmnPropertiesPanelModule,
                //     // BpmnPropertiesProviderModule,
                //     // CamundaPlatformPropertiesProviderModule
                // ]


                moddleExtensions: {
                    camunda: camundaModdleDescriptor,
                },
            });

            // 创建新流程
            // bpmnModeler.createDiagram();

            // selection.changed监听选中的元素
            bpmnModeler.on('selection.changed', (e) => {
                selectedElementsArr.selectedElements = e.newSelection // 数组, 可能有多个
                const el = e.newSelection[0];
                if (el != undefined) {
                    element = el;
                    bpmnProperties.value.General = {};
                    bpmnProperties.value.DescriptionDoc = {};
                    bpmn_properties.value.id = el.businessObject.id;
                    bpmnProperties.value.General.id = el.businessObject.id;
                    bpmn_properties.value.name = el.businessObject.name;
                    bpmnProperties.value.General.name = el.businessObject.name;
                    const documentations = el.businessObject?.documentation;
                    bpmnProperties.value.DescriptionDoc.documentation = documentations && documentations.length ? documentations[0].text : "";
                    eventType.value = el.businessObject.get('assignee');
                    bpmnProperties.value.AssigneeSetting = {};
                    //开始节点
                    if (el.type == "bpmn:StartEvent") {
                        ControlShow(['ShowForm', 'ShowInitiator', 'ShowForm'])
                        bpmnProperties.value.General.initiator = el.businessObject.$attrs.initiator;
                    }

                    if (el.type == "bpmn:UserTask") {
                        ControlShow(['ShowUserTask', 'ShowAsync', 'ShowFreeApproval', 'ShowSkipExpression', 'ShowForm', 'ShowMultiInstance', 'ShowTaskListener'])
                        bpmnProperties.value.General.skipExpression = el.businessObject.$attrs.skipExpression;
                        bpmnProperties.value.General.async = el.businessObject.$attrs.async == 'true' ? true : false;
                        resetAssigneeSetting();
                        getNodeFormDataList(el.id);
                    }

                    if (el.type == "bpmn:ServiceTask") {
                        ControlShow(['ShowUserTask', 'ShowAsync', 'ShowFreeApproval', 'ShowSkipExpression', 'ShowForm', 'ShowMultiInstance', 'ShowTaskListener'])
                        bpmnProperties.value.General.skipExpression = el.businessObject.$attrs.skipExpression;
                        bpmnProperties.value.General.async = el.businessObject.$attrs.async == 'true' ? true : false;
                    }

                    if (el.type == "bpmn:SequenceFlow") {
                        ControlShow(['FlowconfigurationShow']);
                        if (el.businessObject.conditionExpression == undefined) {
                            // 默认
                            bpmnProperties.value.FlowconfigurationValue = "normal";
                        } else if (el.businessObject.conditionExpression == ' "default"') {
                            bpmnProperties.value.FlowconfigurationValue = "default";
                        } else {

                            bpmnProperties.value.FlowconfigurationValue = "condition";
                            const conditionExpression = el.businessObject.conditionExpression;
                            if (conditionExpression.resource) {
                                // this.$set(this.flowConditionForm, "conditionType", "script");
                                // this.$set(this.flowConditionForm, "scriptType", "externalScript");
                                return;
                            }
                            if (conditionExpression.language) {
                                // this.$set(this.flowConditionForm, "conditionType", "script");
                                // this.$set(this.flowConditionForm, "scriptType", "inlineScript");
                                return;
                            }


                            bpmnProperties.value.FlowconfigurationCondition = conditionExpression.$attrs.val;
                            //this.$set(this.flowConditionForm, "conditionType", "expression");
                        }
                    }
                    resetAttributesList();
                    getElementLoop();
                    resetListenersList();
                    initEventListener();
                    switchPanel(el.type);
                } else {
                    element =
                        bpmnModeler.get("elementRegistry").find(el => el.type === "bpmn:Process") ??
                        bpmnModeler.get("elementRegistry").find(el => el.type === "bpmn:Collaboration");
                }
            })

            bpmnModeler.on('element.click', function (event: any) {
                const { element } = event;
                const businessObject = element.businessObject;
                if (businessObject && businessObject.$type === 'bpmn:Process') {
                    const processId = businessObject.id;
                    const processName = businessObject.name;

                    let rootElements = bpmnModeler.getDefinitions().rootElements[0];

                    //const modeling = bpmnModeler.get('modeling');
                    //modeling.updateProperties(element, { id: 'processid0001', name: "222" });
                    switchPanel(businessObject.$type);
                }

                initGlobalEvent();
                initEventListener();
            });

            // bpmnModeler.on('element.dblclick', function (event: any) {
            //     alert(5);
            // });

            //使用element.changed监听发生改变的元素
            bpmnModeler.on('element.changed', (e: any) => {
                const { el } = e;
                // 如果没有 element
                if (!element.value) {
                    return;
                }
                if (el && el.id === element.value.id) {
                    element.value = el;
                }
            })
        }

        const Panelexpand = () => {
            panelProperties.value.PanelexpandVal = !panelProperties.value.PanelexpandVal;
        }
        // 自定义右边属性面板属性定义
        //当前选择的元素合集
        let selectedElementsArr = reactive({
            selectedElements: [],
        })

        let element = ref(null);
        let bpmn_properties = ref({ id: '', name: '' });
        let eventType = ref();
        //邮件发送参数
        // let recipientmail = reactive({
        //   recipient: ['dingzicool@sina.com', 'dingzicool@sina.com'],
        // })

        let eventTypesArr = reactive({ eventTypes: [] });

        /***********************扩展属性-Start************************/
        let bpmnElementPropertyList: any = [];
        let otherExtensionList: any = [];

        const saveAttribute = (properties: any) => {
            let { id, name, value } = properties;
            let updateProperty = bpmnElementPropertyList.find(item => item.id == id);
            if (updateProperty !== undefined) {
                bpmnModeler.get('modeling').updateModdleProperties(element, updateProperty, {
                    id,
                    name,
                    value
                });
            } else {
                // 新建属性字段
                const newPropertyObject = bpmnModeler.get('moddle').create('camunda:Property', { id, name, value });
                // 新建一个属性字段的保存列表
                let vals = bpmnElementPropertyList.concat([newPropertyObject]);
                const propertiesObject = bpmnModeler.get('moddle').create('camunda:Properties', {
                    values: vals,
                });
                updateElementExtensions(propertiesObject);
            }
            resetAttributesList();
        }

        const updateElementExtensions = (properties: any) => {
            const extensions = bpmnModeler.get('moddle').create("bpmn:ExtensionElements", {
                values: otherExtensionList.concat([properties])
            });
            bpmnModeler.get('modeling').updateProperties(element, {
                extensionElements: extensions
            });
        }

        const updateElementListExtensions = (extensionList: any) => {
            const extensions = bpmnModeler.get('moddle').create("bpmn:ExtensionElements", {
                values: extensionList
            });
            bpmnModeler.get('modeling').updateProperties(element, {
                extensionElements: extensions
            });
        }

        const resetAttributesList = () => {
            let bpmnElement = element;
            let otherExtensionList = []; // 其他扩展配置

            let bpmnElementProperties =
                bpmnElement.businessObject?.extensionElements?.values?.filter(ex => {
                    if (ex.$type !== `camunda:Properties`) {
                        otherExtensionList.push(ex);
                    }
                    return ex.$type === `camunda:Properties`;
                }) ?? [];

            // 保存所有的 扩展属性字段
            bpmnElementPropertyList = bpmnElementProperties.reduce((pre, current) => pre.concat(current.values), []);
            // 复制 显示
            bpmnProperties.value.ExtendedAttributeDataSource = JSON.parse(JSON.stringify(bpmnElementPropertyList ?? []));
        }

        const removeAttributes = (key: any) => {
            let index = bpmnProperties.value.ExtendedAttributeDataSource.findIndex(item => item.id === key);
            if (index < 0)
                return;
            bpmnElementPropertyList.splice(index, 1);
            bpmnProperties.value.ExtendedAttributeDataSource.splice(index, 1);
            // 新建一个属性字段的保存列表
            const propertiesObject = bpmnModeler.get('moddle').create(`camunda:Properties`, {
                values: bpmnElementPropertyList
            });
            updateElementExtensions(propertiesObject);
            resetAttributesList();
        }
        /**********************扩展属性-End***************************/

        /**********************多实例-Start*****************************/
        const multiLoopInstance = ref(null)
        const changeLoopCharacteristicsType = (event: any) => {
            let type = event.target.value;
            // 取消多实例配置
            if (type === "none") {
                bpmnModeler.get('modeling').updateProperties(element, { loopCharacteristics: null });
                return;
            }
            // 配置循环
            if (type === "loop") {
                const loopCharacteristicsObject = bpmnModeler.get('moddle').create("bpmn:StandardLoopCharacteristics");
                bpmnModeler.get('modeling').updateProperties(toRaw(element), {
                    loopCharacteristics: loopCharacteristicsObject
                });
                multiLoopInstance.value = null;
                return;
            }
            // 时序
            if (type === "serial") {
                multiLoopInstance.value = bpmnModeler.get('moddle').create("bpmn:MultiInstanceLoopCharacteristics", { isSequential: true });
            } else {
                multiLoopInstance.value = bpmnModeler.get('moddle').create("bpmn:MultiInstanceLoopCharacteristics", { collection: '${coll_userList}' });
            }

            bpmnModeler.get('modeling').updateProperties(toRaw(element), {
                loopCharacteristics: toRaw(multiLoopInstance.value)
            });
        }

        const getElementLoop = () => {
            let businessObject = element.businessObject;
            if (!businessObject.loopCharacteristics) {
                bpmnProperties.value.MultiInstance.MultiInstanceValue = "none";
                bpmnProperties.value.MultiInstance.LoopInstanceForm = {};
                return;
            }
            if (businessObject.loopCharacteristics.$type === "bpmn:StandardLoopCharacteristics") {
                bpmnProperties.value.MultiInstance.MultiInstanceValue = "loop";
                bpmnProperties.value.MultiInstance.LoopInstanceForm = {};
                return;
            }
            if (businessObject.loopCharacteristics.isSequential) {
                bpmnProperties.value.MultiInstance.MultiInstanceValue = "serial";
            } else {
                bpmnProperties.value.MultiInstance.MultiInstanceValue = "parallel";
            }
            // 合并配置
            bpmnProperties.value.MultiInstance.LoopInstanceForm.AsyncAfter = businessObject.loopCharacteristics?.asyncAfter ?? false;
            bpmnProperties.value.MultiInstance.LoopInstanceForm.AsyncBefore = businessObject.loopCharacteristics?.asyncBefore ?? false;
            bpmnProperties.value.MultiInstance.LoopInstanceForm.Exclusive = businessObject.loopCharacteristics?.exclusive ?? false;
            bpmnProperties.value.MultiInstance.LoopInstanceForm.Collection = businessObject.loopCharacteristics?.collection ?? "";
            bpmnProperties.value.MultiInstance.LoopInstanceForm.ElementVariable = businessObject.loopCharacteristics?.elementVariable ?? "";
            bpmnProperties.value.MultiInstance.LoopInstanceForm.CompletionCondition = businessObject.loopCharacteristics?.completionCondition?.body ?? "";
            bpmnProperties.value.MultiInstance.LoopInstanceForm.LoopCardinality = businessObject.loopCharacteristics?.loopCardinality?.body ?? "";

            // 保留当前元素 businessObject 上的 loopCharacteristics 实例

            multiLoopInstance.value = businessObject.loopCharacteristics;
            // 更新表单
            if (
                businessObject.loopCharacteristics.extensionElements &&
                businessObject.loopCharacteristics.extensionElements.values &&
                businessObject.loopCharacteristics.extensionElements.values.length
            ) {
                bpmnProperties.value.MultiInstance.LoopInstanceForm.TimeCycle = businessObject.loopCharacteristics.extensionElements.values[0].body;
            }
        }

        // 循环基数
        const updateLoopCardinality = (event: any) => {
            const cardinality = event.target.value;
            let loopCardinality = null
            if (cardinality && cardinality.length) {
                loopCardinality = bpmnModeler.get('moddle').create('bpmn:FormalExpression', {
                    body: cardinality
                })
            }
            bpmnModeler.get('modeling').updateModdleProperties(
                toRaw(element),
                multiLoopInstance.value,
                {
                    loopCardinality: loopCardinality
                }
            )
        }

        // 完成条件
        const updateLoopCondition = (event: any) => {
            const condition = event.target.value;
            let completionCondition = null;
            if (condition && condition.length) {
                completionCondition = bpmnModeler.get('moddle').create("bpmn:FormalExpression", { body: condition });
            }
            bpmnModeler.get('modeling').updateModdleProperties(element, multiLoopInstance.value, { completionCondition });
        }

        // 各异步状态
        const updateLoopAsync = (key: any) => {
            const { AsyncBefore, AsyncAfter } = bpmnProperties.value.MultiInstance.LoopInstanceForm;
            let asyncAttr = Object.create(null);
            if (!AsyncBefore && !AsyncAfter) {
                bpmnProperties.value.MultiInstance.LoopInstanceForm.Exclusive = false;
                asyncAttr = { asyncBefore: false, asyncAfter: false, exclusive: false, extensionElements: null };
            } else {
                asyncAttr[lowercaseFirstLetter(key)] = bpmnProperties.value.MultiInstance.LoopInstanceForm[key];
            }
            bpmnModeler.get('modeling').updateModdleProperties(element, multiLoopInstance.value, asyncAttr);
        }

        // 直接更新的基础信息
        const updateLoopBase = () => {
            bpmnModeler.get('modeling').updateModdleProperties(element, multiLoopInstance.value, {
                collection: bpmnProperties.value.MultiInstance.LoopInstanceForm.Collection || null,
                elementVariable: bpmnProperties.value.MultiInstance.LoopInstanceForm.ElementVariable || null
            });
        }
        const lowercaseFirstLetter = (string: string) => {
            return string.charAt(0).toLowerCase() + string.slice(1);
        }
        const MultiInstanceConditionChange = (event: any) => {
            const value = event.target.value;

        }

        const MultiInstancePercentageConditionChange = (event: any) => {
            const value = event.target.value;

        }

        const MultiInstancePercentageConditionValChange = (event: any) => {
            const value = event.target.value;

        }

        const MultiInstanceNumberConditionChange = (event: any) => {
            const value = event.target.value;

        }

        const MultiInstanceNumberConditionValChange = (event: any) => {
            const value = event.target.value;

        }

        const MultiInstanceConditionExpressionChange = (event: any) => {
            const value = event.target.value;

        }
        const updateLoopTimeCycle = (event: any) => {
            let timeCycle = event.target.value;
            const extensionElements = bpmnModeler.get('moddle').create("bpmn:ExtensionElements", {
                values: [
                    bpmnModeler.get('moddle').create(`camunda:FailedJobRetryTimeCycle`, {
                        body: timeCycle
                    })
                ]
            });
            bpmnModeler.get('modeling').updateModdleProperties(element, multiLoopInstance.value, { extensionElements });
        }
        /*******************************多实例-End*****************************/

        /**********************办理人员-Start*****************************/

        const resetAssigneeSetting = () => {
            bpmnProperties.value.AssigneeSetting.Assignee = element.businessObject?.get('assignee');

            panelProperties.value.UserTaskActiveKey = element.businessObject?.get('assigneeType') === 'static' ? 'fixed' : 'identifyVal';
            if (panelProperties.value.UserTaskActiveKey === 'fixed') {
                bpmnProperties.value.AssigneeSetting.CandidateUsersStr = element.businessObject?.get('candidateUsers');
                bpmnProperties.value.AssigneeSetting.CandidateGroupsStr = element.businessObject?.get('candidateGroups');
            } else {

                let candidateUser = element.businessObject?.get('candidateUsers');
                bpmnProperties.value.AssigneeSetting.CandidateUsers = candidateUser ? candidateUser.split(',') : [];
                let candidateGroup = element.businessObject?.get('candidateGroups');
                if (candidateGroup) {
                    handleCandidateGroupsFocus(null);
                }
                bpmnProperties.value.AssigneeSetting.CandidateGroups = candidateGroup ? candidateGroup.split(',') : [];
            }
            bpmnProperties.value.UserTaskSpecifyAllocation = element.businessObject?.get('assignee') === '${startCode}' ? 'promoter' : 'assigner';
            bpmnProperties.value.AssigneeSetting.DueDate = element.businessObject?.get('dueDate');
            bpmnProperties.value.AssigneeSetting.Priority = element.businessObject?.get('priority');
        }

        const fixedAssigneeChange = (event: any) => {
            const assignee = event.target.value;
            bpmnModeler.get('modeling').updateProperties(element, { assignee });
        }

        const fixedCandidateUsersChange = (event: any) => {
            const candidateUsers = event.target.value;
            bpmnModeler.get('modeling').updateProperties(element, { candidateUsers });
        }

        const fixedCandidateGroupsChange = (event: any) => {
            const candidateGroups = event.target.value;
            bpmnModeler.get('modeling').updateProperties(element, { candidateGroups });
        }


        const startAssignerClick = (event: any) => {
            bpmnModeler.get('modeling').updateProperties(element, { assignee: '${startCode}' });
        }

        const handleAssignerChange = (val: any) => {
            const assignee = val;
            bpmnModeler.get('modeling').updateProperties(element, { assignee });
        }

        const handleCandidateUsersChange = (val: any) => {
            const candidateUsers = val;
            bpmnModeler.get('modeling').updateProperties(element, { candidateUsers });
        }

        const handleCandidateGroupsChange = (val: any) => {
            const candidateGroups = val;
            bpmnModeler.get('modeling').updateProperties(element, { candidateGroups });
        }

        const handleAssignerFocus = (event: any) => {

        }

        let loadCandidateGroupsData = false;
        const handleCandidateGroupsFocus = (event: any) => {
            if (loadCandidateGroupsData) {
                return;
            }

            getAllRoleListData().
                then(e => {
                    let roleArr = [];
                    let data = e.data.Data;
                    for (var d in data) {
                        roleArr.push({ label: data[d].Name, value: data[d].Id.toString() });
                    }
                    panelProperties.value.Assigner.CandidateGroupsOptions = roleArr;
                    loadCandidateGroupsData = true;
                }).catch(err => {
                    message.error(err.message || "获取角色信息失败!")
                })
        }

        const handleCandidateUsersFocus = (event: any) => {

        }

        const handleUserTaskTabChange = (event: any) => {
            if (panelProperties.value.UserTaskActiveKey === "fixed") {
                bpmnModeler.get('modeling').updateProperties(element, { assigneeType: 'static' });
            } else {
                bpmnModeler.get('modeling').updateProperties(element, { assigneeType: 'idm' });
            }
        }

        const onDueDateSearch = () => {
            // if (val === "") {
            //     bpmnModeler.get('modeling').updateProperties(element, { dueDate: null });
            // }
        }

        const onDueDateChange = (event: any) => {
            let val = event.target.value;
            bpmnModeler.get('modeling').updateProperties(element, { dueDate: val });
        }

        const onPriorityChange = (val: any) => {
            bpmnModeler.get('modeling').updateProperties(element, { priority: val });
        }
        /***********************办理人员-End******************************/

        /************************任务监听器-Start*****************************/
        const TaskListenersFieldEditableData: UnwrapRef<Record<string, TaskListenerDataItem>> = reactive({});
        let tasklistenerList: any; // 其他扩展配置
        let bpmnElementListeners: any = [];
        // let elementListenersList: any = [];
        //let fieldsListOfListener: any = [];
        let editingListenerIndex = -1;
        //let editingListenerFieldIndex = -1;

        /***弹出窗口**/
        const model_visible = ref<boolean>(false);
        const confirmLoading = ref<boolean>(false);
        const model_handleOk = () => {
            confirmLoading.value = true;
            saveListenerConfig();
            //setTimeout(() => {
            model_visible.value = false;
            confirmLoading.value = false;
            //}, 2000);
        }
        /**弹出窗口**/


        const addTaskListener = (event: any) => {
            model_visible.value = true;
            editingListenerIndex = -1;
            let id = CustomIdPrefix("TaskListener");
            panelProperties.value.ListenerType = "TaskListener";
            bpmnProperties.value.TaskListener = { id: id, fields: [] };
            bpmnProperties.value.TaskListenersFieldDataSource = [];
        }

        const resetListenersList = () => {
            otherExtensionList = [];
            bpmnElementListeners = element.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `camunda:TaskListener`) ?? [];
            bpmnProperties.value.TaskListenerDataSource = bpmnElementListeners.map(listener => initListenerType(listener));
            bpmnElementListeners = element.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `camunda:ExecutionListener`) ?? [];
            bpmnProperties.value.TaskExecuteListenerDataSource = bpmnElementListeners.map(listener => initListenerType(listener));
        }

        function initListenerType(listener: any) {
            let listenerType;
            if (listener.class)
                listenerType = "classListener";

            if (listener.expression)
                listenerType = "expressionListener";

            if (listener.delegateExpression)
                listenerType = "delegateExpressionListener";

            if (listener.script)
                listenerType = "scriptListener";
            if (listener.$type === `camunda:TaskListener`) {
                listener.id = CustomIdPrefix("TaskListener");
            }
            else {
                listener.id = CustomIdPrefix("TaskExecuteListener");
            }

            return {
                ...JSON.parse(JSON.stringify(listener)),
                ...(listener.script ?? {}),
                listenerType: listenerType,
                onTransaction: listener.$attrs.onTransaction,
            };
        }

        const editTasklistener = (key: any) => {
            model_visible.value = true;
            panelProperties.value.ListenerType = "TaskListener";
            editingListenerIndex = bpmnProperties.value.TaskListenerDataSource.findIndex(item => item.id === key);
            bpmnProperties.value.TaskListener = bpmnProperties.value.TaskListenerDataSource[editingListenerIndex];
            bpmnProperties.value.TaskListenersFieldDataSource = bpmnProperties.value.TaskListener.fields.map(field => ({ ...field, fieldType: field.string ? "string" : "expression", value: field.string ?? field.expression ?? "", id: CustomIdPrefix('field') }));
        }

        const delTasklistener = (key: any) => {
            let index = bpmnProperties.value.TaskListenerDataSource.findIndex(item => item.id === key);
            bpmnElementListeners.splice(index, 1);
            bpmnProperties.value.TaskListenerDataSource.splice(index, 1);
            updateElementListExtensions(tasklistenerList.concat(bpmnElementListeners));
        }

        // 保存监听器
        const saveListenerConfig = async () => {
            bpmnProperties.value.TaskListener.fields = [];
            bpmnProperties.value.TaskListenersFieldDataSource.forEach(item => {
                var fieldObj = { id: item.id, fieldType: item.fieldType, name: item.name };
                if (item.fieldType == "string") {
                    fieldObj.string = item.value;
                } else {
                    fieldObj.expression = item.value;
                }
                bpmnProperties.value.TaskListener.fields.push(fieldObj);
            })
            var isTask = panelProperties.value.ListenerType == "TaskListener";

            const listenerObject = createListenerObject(bpmnModeler, bpmnProperties.value.TaskListener, isTask, 'camunda');
            if (editingListenerIndex === -1) {
                bpmnElementListeners.push(listenerObject);
                if (panelProperties.value.ListenerType == "TaskListener") {
                    bpmnProperties.value.TaskListenerDataSource.push(bpmnProperties.value.TaskListener);
                } else {
                    bpmnProperties.value.TaskExecuteListenerDataSource.push(bpmnProperties.value.TaskListener);
                }
            } else {
                bpmnElementListeners.splice(editingListenerIndex, 1, listenerObject);
                if (panelProperties.value.ListenerType == "TaskListener") {
                    bpmnProperties.value.TaskListenerDataSource.splice(editingListenerIndex, 1, bpmnProperties.value.TaskListener);
                } else {
                    bpmnProperties.value.TaskExecuteListenerDataSource.splice(editingListenerIndex, 1, bpmnProperties.value.TaskListener);
                }
            }
            // 保存其他配置
            if (panelProperties.value.ListenerType == "TaskListener") {
                tasklistenerList = element.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `camunda:TaskListener`) ?? [];
            } else {
                tasklistenerList = element.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `camunda:ExecutionListener`) ?? [];
            }
            updateElementListExtensions(tasklistenerList.concat(bpmnElementListeners));
            // 4. 隐藏侧边栏
            bpmnProperties.value.TaskListener = {};
            bpmnProperties.value.TaskListener.fields = [];
            editingListenerIndex = -1;
        }

        const editTaskListenersField = (key: string) => {
            TaskListenersFieldEditableData[key] = cloneDeep(bpmnProperties.value.TaskListenersFieldDataSource.filter(item => key === item.id)[0]);
        };

        const saveTaskListenersField = (key: string) => {
            Object.assign(bpmnProperties.value.TaskListenersFieldDataSource.filter(item => key === item.id)[0], TaskListenersFieldEditableData[key]);
            delete TaskListenersFieldEditableData[key];
        };

        const cancelTaskListenersField = (key: string) => {
            delete TaskListenersFieldEditableData[key];
        };


        const delTaskListenersField = (key: string) => {
            delete TaskListenersFieldEditableData[key];
            let index = bpmnProperties.value.TaskListenersFieldDataSource.findIndex(item => key === item.id);
            bpmnProperties.value.TaskListenersFieldDataSource.splice(index, 1);
        };

        const addTaskListenersField = () => {
            let id = CustomIdPrefix('field');
            bpmnProperties.value.TaskListenersFieldDataSource.push({ id: id });
        }

        // 任务执行监听器
        const editTaskExecuteListener = (key: string) => {
            model_visible.value = true;
            panelProperties.value.ListenerType = "TaskExecuteListener";
            editingListenerIndex = bpmnProperties.value.TaskExecuteListenerDataSource.findIndex(item => item.id === key);
            bpmnProperties.value.TaskListener = bpmnProperties.value.TaskExecuteListenerDataSource[editingListenerIndex];
            bpmnProperties.value.TaskListenersFieldDataSource = bpmnProperties.value.TaskListener.fields.map(field => ({ ...field, fieldType: field.string ? "string" : "expression", value: field.string ?? field.expression ?? "", id: CustomIdPrefix('field') }));
        }

        const delTaskExecuteListener = (key: any) => {
            let index = bpmnProperties.value.TaskExecuteListenerDataSource.findIndex(item => item.id === key);
            bpmnElementListeners.splice(index, 1);
            bpmnProperties.value.TaskExecuteListenerDataSource.splice(index, 1);
            updateElementListExtensions(tasklistenerList.concat(bpmnElementListeners));
        }

        const AddTaskExecuteListener = (event: any) => {
            model_visible.value = true;
            editingListenerIndex = -1;
            let id = CustomIdPrefix("TaskExecuteListener");
            panelProperties.value.ListenerType = "TaskExecuteListener";
            bpmnProperties.value.TaskListener = { id: id, fields: [] };
            bpmnProperties.value.TaskListenersFieldDataSource = [];
        }
        /************************任务监听器-End*******************************/

        /************************事件监听器-Start*******************************/
        const model_event_listener_visible = ref<boolean>(false);

        const model_event_listener_handleOk = () => {
            confirmLoading.value = true;
            let listenerFrm = {};
            let evs = bpmnProperties.value.EventListener.events;
            let id = bpmnProperties.value.EventListener.id;
            if (!panelProperties.value.Panels.IsThrowEvent) { // 抛出事件            
                let dec = bpmnProperties.value.EventListener.delegateExpressionOrClass;
                let et = bpmnProperties.value.EventListener.entityType;
                if (bpmnProperties.value.EventListener.listenerType == "classListener") { // 类监听
                    listenerFrm = { id: id, events: evs, class: dec, entityType: et };
                } else { // 表达式监听
                    listenerFrm = { id: id, events: evs, delegateExpression: dec, entityType: et };
                }
            } else {
                let tevt = bpmnProperties.value.EventListener.throwEvent;
                let tevl = bpmnProperties.value.EventListener.throwEventVal;

                if (tevt == "message") {
                    listenerFrm = { id: id, events: evs, throwEvent: tevt, messageName: tevl };
                } else if (tevt == "signal" || tevt == "globalSignal") {
                    listenerFrm = { id: id, events: evs, throwEvent: tevt, signalName: tevl };
                } else if (tevt == "error") {
                    listenerFrm = { id: id, events: evs, throwEvent: tevt, errorCode: tevl };
                }
            }
            let listenerObj = bpmnModeler.get('moddle').create(`camunda:EventListener`, listenerFrm);
            let eventListenerData = { ...bpmnProperties.value.EventListener };
            if (eventListenerData.throwEvent) { //抛出事件
                eventListenerData.listenerType = eventListenerData.throwEvent;
                eventListenerData.delegateExpressionOrClass = eventListenerData.throwEventVal;
            }
            // 保存
            if (editingListenerIndex == -1) {
                bpmnElementListeners.push(listenerObj);
                bpmnProperties.value.TaskEventListenerDataSource.push(eventListenerData);
            } else {
                bpmnElementListeners.splice(editingListenerIndex, 1, listenerObj);
                bpmnProperties.value.TaskEventListenerDataSource.splice(editingListenerIndex, 1, eventListenerData);
            }
            tasklistenerList = element.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `camunda:EventListener`) ?? [];
            updateElementListExtensions(bpmnElementListeners.concat(tasklistenerList));
            editingListenerIndex = -1;
            model_event_listener_visible.value = false;
            confirmLoading.value = false;
        }

        const editEventListener = (key: any) => {
            bpmnProperties.value.EventListener = bpmnProperties.value.TaskEventListenerDataSource.filter(item => item.id === key)[0];
            model_event_listener_visible.value = true;
            panelProperties.value.Panels.IsThrowEvent = !!bpmnProperties.value.EventListener.throwEvent;
        }

        const delEventListener = (key: any) => {
            let index = bpmnProperties.value.TaskEventListenerDataSource.findIndex(item => item.id === key);
            bpmnElementListeners.splice(index, 1);
            bpmnProperties.value.TaskEventListenerDataSource.splice(index, 1);
            updateElementListExtensions(tasklistenerList.concat(bpmnElementListeners));
        }

        const addEventListener = (event: any) => {
            model_event_listener_visible.value = true;
            bpmnProperties.value.EventListener = {
                id: CustomIdPrefix("EventListener"),
            };
        }

        const throwEventChange = (event: any) => {
            if (panelProperties.value.Panels.IsThrowEvent) {
                bpmnProperties.value.EventListener.throwEventVal = "";
                if (bpmnProperties.value.EventListener.throwEvent == "message") {
                    panelProperties.value.EventListenerThrowEventValOptions = [];
                    bpmnProperties.value.MessageEventDataSource.forEach(item => {
                        panelProperties.value.EventListenerThrowEventValOptions.push({ label: item.name, value: item.name });
                    });
                }
                else if (bpmnProperties.value.EventListener.throwEvent == "signal") {
                    panelProperties.value.EventListenerThrowEventValOptions = [];
                    bpmnProperties.value.SingalListDataSource.forEach(item => {
                        if (item.scope != "global") {
                            panelProperties.value.EventListenerThrowEventValOptions.push({ label: item.name, value: item.name });
                        }
                    });
                }
                else if (bpmnProperties.value.EventListener.throwEvent == "globalSignal") {
                    panelProperties.value.EventListenerThrowEventValOptions = [];
                    bpmnProperties.value.SingalListDataSource.forEach(item => {
                        if (item.scope == "global") {
                            panelProperties.value.EventListenerThrowEventValOptions.push({ label: item.name, value: item.name });
                        }
                    });
                }
                else if (bpmnProperties.value.EventListener.throwEvent == "error") {
                    panelProperties.value.EventListenerThrowEventValOptions = [];
                    bpmnProperties.value.ErrorListDataSource.forEach(item => {
                        panelProperties.value.EventListenerThrowEventValOptions.push({ label: item.name, value: item.name });
                    });
                }
            }
        }

        const initEventListener = () => {
            bpmnElementListeners = element.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `camunda:EventListener`) ?? [];
            bpmnProperties.value.TaskEventListenerDataSource = bpmnElementListeners.map(listener => ({
                ...listener,
                events: listener.events.split(','),
                listenerType: convertListenerType(listener),
                delegateExpressionOrClass: convertDelegateExpressionOrClass(listener),
                throwEventVal: convertThrowEventVal(listener)
            }));
        }

        const convertListenerType = (listener: any) => {
            if (listener.class) {
                return "classListener";
            } else if (listener.delegateExpression) {
                return "delegateExpressionListener";
            } else if (listener.throwEvent == "message") {
                return "message";
            } else if (listener.throwEvent == "signal") {
                return "signal";
            } else if (listener.throwEvent == "globalSignal") {
                return "globalSignal";
            } else if (listener.throwEvent == "error") {
                return "error";
            }

            return '';
        }

        const convertDelegateExpressionOrClass = (listener: any) => {
            if (listener.class) {
                return listener.class;
            } else if (listener.delegateExpression) {
                return listener.delegateExpression;
            } else if (listener.throwEvent == "message") {
                return listener.messageName;
            } else if (listener.throwEvent == "signal") {
                return listener.signalName;
            } else if (listener.throwEvent == "globalSignal") {
                return listener.signalName;
            } else if (listener.throwEvent == "error") {
                return listener.errorCode;
            }

            return '';
        }

        const convertThrowEventVal = (listener: any) => {
            if (listener.throwEvent == "message") {
                return listener.messageName;
            } else if (listener.throwEvent == "signal") {
                return listener.signalName;
            } else if (listener.throwEvent == "globalSignal") {
                return listener.signalName;
            } else if (listener.throwEvent == "error") {
                return listener.errorCode;
            }

            return '';
        }
        /************************事件监听器-End*******************************/

        /************************全局事件-Start*******************************/
        const MessageEventEditableData: UnwrapRef<Record<string, GlobalErrorEventBaseDataItem>> = reactive({});
        let delGlobalEventId: any = [];

        const saveMessageEvent = (key: string) => {
            Object.assign(bpmnProperties.value.MessageEventDataSource.filter(item => key === item.id)[0], MessageEventEditableData[key]);
            delete MessageEventEditableData[key];
            saveGlobalEvent();
        }

        const cancelMessageEvent = (key: string) => {
            delete MessageEventEditableData[key];
        }

        const editMessageEvent = (key: string) => {
            MessageEventEditableData[key] = cloneDeep(bpmnProperties.value.MessageEventDataSource.filter(item => key === item.id)[0]);
        }

        const delMessageEvent = (key: string) => {
            delete MessageEventEditableData[key];
            let index = bpmnProperties.value.MessageEventDataSource.findIndex(item => key === item.id);
            bpmnProperties.value.MessageEventDataSource.splice(index, 1);
            delGlobalEventId.push(key);
        }

        const addMessageEvent = () => {
            let id = CustomIdPrefix("Message");
            bpmnProperties.value.MessageEventDataSource.push({ id: id });
        }

        const ErrorListEditableData: UnwrapRef<Record<string, GlobalErrorEventDataItem>> = reactive({});

        const saveErrorList = (key: string) => {
            Object.assign(bpmnProperties.value.ErrorListDataSource.filter(item => key === item.id)[0], ErrorListEditableData[key]);
            delete ErrorListEditableData[key];
            saveGlobalEvent();
        }

        const cancelErrorList = (key: string) => {
            delete ErrorListEditableData[key];
        }

        const editErrorList = (key: string) => {
            ErrorListEditableData[key] = cloneDeep(bpmnProperties.value.ErrorListDataSource.filter(item => key === item.id)[0]);
        }

        const delErrorList = (key: string) => {
            delete ErrorListEditableData[key];
            let index = bpmnProperties.value.ErrorListDataSource.findIndex(item => key === item.id);
            bpmnProperties.value.ErrorListDataSource.splice(index, 1);
            delGlobalEventId.push(key);
        }

        const addErrorList = () => {
            let id = CustomIdPrefix("Error");
            bpmnProperties.value.ErrorListDataSource.push({ id: id });
        }


        const SingalListEditableData: UnwrapRef<Record<string, GlobalSingalEventDataItem>> = reactive({});

        const saveSingalList = (key: string) => {
            Object.assign(bpmnProperties.value.SingalListDataSource.filter(item => key === item.id)[0], SingalListEditableData[key]);
            delete SingalListEditableData[key];
            saveGlobalEvent();
        }

        const cancelSingalList = (key: string) => {
            delete SingalListEditableData[key];
        }

        const editSingalList = (key: string) => {
            SingalListEditableData[key] = cloneDeep(bpmnProperties.value.SingalListDataSource.filter(item => key === item.id)[0]);
        }

        const delSingalList = (key: string) => {
            delete SingalListEditableData[key];
            let index = bpmnProperties.value.SingalListDataSource.findIndex(item => key === item.id);
            bpmnProperties.value.SingalListDataSource.splice(index, 1);
            delGlobalEventId.push(key);
        }

        const addSingalList = () => {
            let id = CustomIdPrefix("Singal");
            bpmnProperties.value.SingalListDataSource.push({ id: id });
        }

        const UpdateListEditableData: UnwrapRef<Record<string, GlobalEscalationEventDataItem>> = reactive({});

        const saveUpdateList = (key: any) => {
            Object.assign(bpmnProperties.value.UpdateListDataSource.filter(item => key === item.id)[0], UpdateListEditableData[key]);
            delete UpdateListEditableData[key];
            saveGlobalEvent();
        }

        const cancelUpdateList = (key: string) => {
            delete UpdateListEditableData[key];
        }

        const editUpdateList = (key: string) => {
            UpdateListEditableData[key] = cloneDeep(bpmnProperties.value.UpdateListDataSource.filter(item => key === item.id)[0]);
        }

        const delUpdateList = (key: string) => {
            delete UpdateListEditableData[key];
            let index = bpmnProperties.value.UpdateListDataSource.findIndex(item => key === item.id);
            bpmnProperties.value.UpdateListDataSource.splice(index, 1);
            delGlobalEventId.push(key);
        }

        const addUpdateList = () => {
            let id = CustomIdPrefix("Escalation");
            bpmnProperties.value.UpdateListDataSource.push({ id: id });
        }

        const initGlobalEvent = () => {
            let rootElements = bpmnModeler.getDefinitions().rootElements;

            bpmnProperties.value.MessageEventDataSource = [];
            bpmnProperties.value.SingalListDataSource = [];
            bpmnProperties.value.ErrorListDataSource = [];
            bpmnProperties.value.UpdateListDataSource = [];

            rootElements.forEach(el => {

                if (el.$type == "bpmn:Message") {
                    bpmnProperties.value.MessageEventDataSource.push({ ...el });
                }

                if (el.$type == "bpmn:Signal") {
                    let signal = { ...el };
                    signal.scope = el.$attrs.scope;
                    bpmnProperties.value.SingalListDataSource.push(signal);
                }

                if (el.$type == "bpmn:Error") {
                    bpmnProperties.value.ErrorListDataSource.push({ ...el });
                }

                if (el.$type == "bpmn:Escalation") {
                    bpmnProperties.value.UpdateListDataSource.push({ ...el });
                }
            });
        }

        const saveGlobalEvent = () => {
            let rootElements = bpmnModeler.getDefinitions().rootElements;

            // 根据 delGlobalEventId 存放的 ID，安全删除 rootElements 里面对应的项
            delGlobalEventId.forEach(id => {
                const index = rootElements.findIndex(el => el.id === id);
                if (index !== -1) {
                    rootElements.splice(index, 1);
                }
            });

            bpmnProperties.value.MessageEventDataSource.forEach(item => {
                const objRef = bpmnModeler.get('moddle').create("bpmn:Message", item);
                rootElements.push(objRef);
            });

            bpmnProperties.value.ErrorListDataSource.forEach(item => {
                const objRef = bpmnModeler.get('moddle').create("bpmn:Error", item);
                rootElements.push(objRef);
            });

            bpmnProperties.value.SingalListDataSource.forEach(item => {
                const objRef = bpmnModeler.get('moddle').create("bpmn:Signal", item);
                rootElements.push(objRef);
            });

            bpmnProperties.value.UpdateListDataSource.forEach(item => {
                const objRef = bpmnModeler.get('moddle').create("bpmn:Escalation", item);
                rootElements.push(objRef);
            });
            //initGlobalEvent();
        }

        /************************全局事件-End*********************************/

        //自定义面板内容
        /**
         * 更新元素属性
         * @param { Object } 要更新的属性, 例如 { name: '', id: '' }
         *
         */

        function updateProperties(properties: any) {
            const modeling = bpmnModeler.get('modeling');
            modeling.updateProperties(element, properties);
        }

        // 当控件内的内容发生改变时, 同步更新element.
        function changeValueField(val: any, propertieName: any, type: any) {
            const value = val;
            let properties: any = {};
            properties[type] = value;
            bpmnProperties.value[propertieName][type] = value;
            element.businessObject[type] = value;
            updateProperties(properties); // 调用属性更新方法
        }

        function changeElementField(event: any, elementName: any, propertieName: any, type: any) {
            const value = event.target.value;
            const documentation = bpmnModeler.get("bpmnFactory").create(elementName, { text: value });
            let properties: any = {};
            properties[type] = [documentation];
            bpmnProperties.value[propertieName][type] = value;
            element.businessObject[type] = [value];
            updateProperties(properties); //调用属性更新方法
        }

        /**
         * 改变控件触发的事件
         * @param { Object } input的Event
         * @param { String } 要修改的属性的名称
         *
         *
         */
        // 当控件内的内容发生改变时, 同步更新element.
        function changeField(event: any, type: any) {
            const value = event.target.value;
            let properties: any = {};
            properties[type] = value;
            element.businessObject[type] = value;

            updateProperties(properties); // 调用属性更新方法
        }

        // 当控件内的内容发生改变时, 同步更新element.
        function changeField(event: any, propertieName: any, type: any) {
            const value = event.target.value;
            let properties: any = {};
            properties[type] = value;
            bpmnProperties.value[propertieName][type] = value;
            element.businessObject[type] = value;
            updateProperties(properties); // 调用属性更新方法
        }

        // 用户下拉菜单
        function changeEventType(event: any) {
            const value = event.target.value
            //const bpmnReplace = bpmnModeler.get('bpmnReplace')
            eventType.value = value
            // bpmnReplace.replaceElement(element, {
            //     type: element.businessObject.$type,
            //     eventDefinitionType: value,
            // })
            element.businessObject['assignee'] = value;
            let properties: any = {};
            properties['assignee'] = value;
            updateProperties(properties);
        }

        function success() {
            addBpmnListener()
        }

        function addBpmnListener() {
            // 给图绑定事件，当图有发生改变就会触发这个事件
            bpmnModeler.on('commandStack.changed', () => {
                saveDiagram(function (err, xml) {
                    bnpmXML.content = xml
                    // 这里获取到的就是最新的xml信息
                    console.log('zx', xml)
                    //setEncoded(saveDiagramlink, 'diagram.bpmn', err ? null : xml)
                })

                // //邮件发送
                // getSendmail(recipientmail).then((res) => {
                //   console.log('邮件发送', res)
                // })
            })
        }

        /*******************************流程表单配置****************************/
        const formOptions = ref([]);
        //表单对象
        const flowFormConfigFormState: UnwrapRef<FormDataItem> = reactive({
            Id: '',
            IsReadonly: false,
            FormId: '',
            FormCode: '',
            SortNum: 1,
            NodeId: '',
            FormName: '',
            FormPath: '',
            IsAllowSave: true,
            IsShow: true,
            FormType: 1,
            FormContent:''
        });

        const getNodeFormDataList = (nodeId: any) => {
            getNodeFormData({ nodeId: nodeId }).then(res => {
                bpmnProperties.value.FormDataSource = res.data.Data;
            }).catch(err => {
                console.log(err)
            })
        }

        const getAllInnerFormSelectData = () => {
            getAllFormData().then(res => {
                bpmnProperties.value.InnerFormDataSource = res.data.Data;
            }).catch(err => {
                console.log(err);
                message.error(err.message || "获取表单列表失败!");
            })
        }

        const getOnlineFormPageListData=(current,pageSize)=>{
            getOnlineFormPageList({current:current,pageSize:pageSize}).then(res => {
                bpmnProperties.value.OnlineFormDataSource = res.data.Data; 
                onlineFormPagination.total = res.data.Total;
            }).catch(err => {
                console.log(err);
                message.error(err.message || "获取表单列表失败!"); 
            })
        }

        const FormEditableData: UnwrapRef<Record<string, FormDataItem>> = reactive({});
        const model_innerformconfig_visible = ref<boolean>(false);

        const model_innerformconfig_handleOk = () => {
            confirmLoading.value = true;
            //bpmnProperties.value.FormDataSource.push(flowFormConfigFormState);
            saveOrUpdateNodeForm(flowFormConfigFormState).then(res => {
                if (res.data.ErrorCode == "000000") {
                    message.success("保存成功!");
                    getNodeFormDataList(element.id);
                }
            }).catch(err => {
                console.log(err);
                message.error(err.message || "保存失败!");
            })
            model_innerformconfig_visible.value = false;
            confirmLoading.value = false;
        }

        const addFormConfig = () => {
            model_innerformconfig_visible.value = true;
            flowFormConfigFormState.NodeId = element.id;
            flowFormConfigFormState.SortNum = bpmnProperties.value.FormDataSource.length + 1;
        }

        const editFormConfig = (record: any) => {
            model_innerformconfig_visible.value = true;
            Object.assign(flowFormConfigFormState, record);
        }

        const delFormConfig = (key: string) => {
            //先删除服务器的
            delNodeFormData({ flowFormId: key }).then(res => {
                if (res.data.ErrorCode == "000000") {
                    message.success("删除成功!");
                    getNodeFormDataList(element.id);
                } else {
                    message.error(res.data.Message || "删除失败!")
                }
            }).catch(err => {
                console.log(err)
                message.error(err.message || "删除失败!")
            })
        }

        const query = () => {
            if (formTabActiveKey.value == "0") {
                getAllInnerFormSelectData();
            } else {
                getOnlineFormPageListData(onlineFormPagination.current,onlineFormPagination.size)
            }
        }

        const resetQuery = () => {

        }

        const selectInnerForm = (record: any) => {
            flowFormConfigFormState.FormCode = record.FormCode;
            flowFormConfigFormState.FormId = record.Id;
            flowFormConfigFormState.FormName = record.FormName;
            flowFormConfigFormState.FormPath = record.FormPath;
            flowFormConfigFormState.FormType = 1;
            flowFormConfigFormState.FormContent = '';
        }

        const selectOnlineForm = (record: any) => {
            flowFormConfigFormState.FormCode = record.FormCode;
            flowFormConfigFormState.FormId = record.Id;
            flowFormConfigFormState.FormName = record.Name;
            flowFormConfigFormState.FormPath = '';
            flowFormConfigFormState.FormType = 2;
            flowFormConfigFormState.FormContent = record.FormContent;
        }

        const formTabActiveKey = ref("0");

        const formTabAChange = (activeKey: any) => {
           if(activeKey=="0"){
                flowFormConfigFormState.FormType = 1;
                flowFormConfigFormState.FormContent = '';
           }else{
                flowFormConfigFormState.FormType = 2;
                flowFormConfigFormState.FormPath = '';
           }
        }

        const innerFormPagination = reactive({
            // defaultPageSize: 8, // 默认每页显示多少个
            // defaultCurrent: 1,
            total: 0,
            current: 1,
            onChange: (current: number, size: number) => {
               
            }
        })
        const onlineFormPagination = reactive({
            // defaultPageSize: 8, // 默认每页显示多少个
            // defaultCurrent: 1,
            total: 0,
            current: 1,
            onChange: (current: number, size: number) => {
                getOnlineFormPageListData(current,size)
            }
        })



        /*******************************流程表单配置****************************/
        const labelCol = { span: 6 };
        const wrapperCol = { span: 18 };

        return {
            processRedo, processUndo, processReZoom, elementsAlign, defaultZoom, processZoomIn,
            processZoomOut, processZoomTo, Panelexpand, SwitchMock, customStyle, bpmnProperties,
            panelProperties, bpmn_properties, SaveBpmnXml, props, show, modalLoading, open, close,
            modalOk, modalCancel, changeEventType, selectedElementsArr, element, eventType, eventTypesArr,
            changeField, onMounted, changeValueField, changeElementField, updateFlowType, updateFlowCondition,
            ExtendedAttributeEditableData, editExtendedAttribute, delExtendedAttribute, saveExtendedAttribute, updateLoopBase,
            cancelExtendedAttribute, addExtendedAttribute, changeLoopCharacteristicsType, updateLoopAsync, updateLoopCondition,
            updateLoopTimeCycle, model_visible, confirmLoading, model_handleOk, addTaskListener, MultiInstanceConditionChange,
            MultiInstancePercentageConditionChange, MultiInstancePercentageConditionValChange, MultiInstanceNumberConditionChange,
            MultiInstanceNumberConditionValChange, MultiInstanceConditionExpressionChange, bpmnDetailShow, bpmnDetailModal, bpmnXML,
            updateLoopCardinality, TaskListenersFieldEditableData, editTaskListenersField, delTaskListenersField, saveTaskListenersField,
            cancelTaskListenersField, addTaskListenersField, editTasklistener, delTasklistener, taskListenerFieldType, editTaskExecuteListener,
            delTaskExecuteListener, editEventListener, delEventListener, AddTaskExecuteListener, addEventListener, saveMessageEvent,
            cancelMessageEvent, editMessageEvent, delMessageEvent, addMessageEvent, MessageEventEditableData, ErrorListEditableData,
            saveErrorList, cancelErrorList, editErrorList, delErrorList, addErrorList, SingalListEditableData, saveSingalList,
            cancelSingalList, editSingalList, delSingalList, addSingalList, UpdateListEditableData, saveUpdateList, cancelUpdateList,
            editUpdateList, delUpdateList, addUpdateList, model_event_listener_visible, model_event_listener_handleOk, singalScopeType,
            throwEventChange, taskEventListener, fixedAssigneeChange, fixedCandidateUsersChange, fixedCandidateGroupsChange,
            startAssignerClick, handleAssignerChange, handleCandidateUsersChange, handleCandidateGroupsChange, handleAssignerFocus,
            handleCandidateGroupsFocus, handleCandidateUsersFocus, handleUserTaskTabChange, onDueDateSearch, onDueDateChange, onPriorityChange,
            FormEditableData, formOptions, addFormConfig, delFormConfig, model_innerformconfig_visible, model_innerformconfig_handleOk,
            flowFormConfigFormState, labelCol, wrapperCol, query, resetQuery, selectInnerForm, editFormConfig, formTabActiveKey,
            formTabAChange, selectOnlineForm, innerFormPagination, onlineFormPagination
        }

    }
})

</script>

<style lang="scss">
/*左边工具栏以及编辑节点的样式*/
@import 'bpmn-js/dist/assets/diagram-js.css';
@import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
@import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
@import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
@import 'bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css';

.editable-row-operations a {
    margin-right: 8px;
}

/* @import '@bpmn-io/properties-panel/dist/assets/properties-panel.css'; */
.full-modal {
    .ant-modal {
        max-width: 100%;
        top: 0;
        padding-bottom: 0;
        margin: 0;

    }



    .ant-modal-body {
        flex: 1;
    }
}

.containers {
    width: 100%;
    display: flex; //新增，为了让右侧和左侧一起看到

    .canvas {
        width: 100%;
    }

    .bjs-powered-by {
        display: none;
    }

    margin-top: 10px;
    height: calc(100vh - 198px);
    display: flex;
    background: url("") repeat !important;

}

.toggle-btn {
    width: 20px;
    height: 64px;
    position: relative;
    z-index: 10;
    left: 15px;
    top: 50%;
    transform: translate(-100%, -50%);
    cursor: pointer;
    border-radius: 8px 0 0 8px;
    color: var(--color-text-2);
    background-color: #d8d4d4;
    border-top: 1px solid var(--color-border-2);
    border-left: 1px solid var(--color-border-2);
    border-bottom: 1px solid var(--color-border-2);
    box-shadow: -2px 0 6px 0 var(--shadow2-center);
    text-align: center;
    line-height: 64px;
}

.arco-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    color: inherit;
    font-style: normal;
    vertical-align: -2px;
    outline: none;
    stroke: currentColor;
}

.panel {
    position: absolute;
    right: 0;
    top: 0;
    width: 450px;
}

.buttons {
    position: absolute;
    left: 20px;
    bottom: 20px;
}

.buttons li {
    display: inline-block;
    margin: 5px;
}

.buttons li a {
    color: #999;
    background: #eee;
    cursor: not-allowed;
    padding: 8px;
    border: 1px solid #ccc;
    text-decoration: none;
}

.buttons li a.active {
    color: #333;
    background: #fff;
    cursor: pointer;
}

/** 自定义属性面板样式 **/

.custom-properties-panel {
    overflow: auto;
    right: 0px;
    top: 50px;
    height: 100%;
    width: 0px;
    background-color: #fff9f9;
    border-color: rgba(0, 0, 0, 0.09);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}


.custom-properties-panel-open {
    overflow: auto;
    right: 0px;
    top: 50px;
    height: 100%;
    background-color: #fff9f9;
    border-color: rgba(0, 0, 0, 0.09);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
    width: 650px !important;
    padding-left: 20px;
}

.ant-select-selection-item {
    line-height: normal !important;
}

.empty {
    height: 200px;
    line-height: 200px;
    font-weight: 700;
}

.element-item {
    padding: 10px;
    margin-top: 5px;
    border: 1px solid;
    border-color: rgb(182, 182, 182);
    border-radius: 8px;
}

.element-item:first-child {
    margin-top: 0;
}

.custom-properties-panel input,
.custom-properties-panel textarea {
    padding: 4px 11px;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    transition: all 0.3s;
    outline: none;
}

.custom-properties-panel input:focus,
.custom-properties-panel button:focus,
.custom-properties-panel textarea:focus,
.custom-properties-panel [contenteditable]:focus {
    border-color: rgb(239, 112, 96);
    box-shadow: 0 0 1px 2px rgb(239, 112, 96, 0.2);
}

/* .custom-properties-panel label {
    font-weight: bold;
} 

.custom-properties-panel label:after {
    content: ': ';
}*/

.arco-icon-rotate {
    transform: rotate(180deg) scaleY(1.5);
}

.custom-properties-panel button+button {
    margin-left: 10px;
}

.comform {
    & .form__item {
        margin-bottom: 16px;

        & .ant-form-item-label {
            flex-grow: 1 !important;
            flex-shrink: 0;
        }
    }
}

/* 覆盖 .ant-tabs-top-content 的 margin-left 样式 */
.ant-tabs-top-content.ant-tabs-content.ant-tabs-content-animated {
    margin-left: 0 !important;
}
</style>